今さら気づいたcssショートハンドの使い方

cssショートハンドは適切に使えてるか

cssのショートハンドってあるじゃないですか。
コードの量を 少しでも 少なくするために、

css

li{
 background:#fff;
}

とか background-colorを使えばいいのに、このように書いてしまいます。
何にも思わずこれ使ってました。
でもね。。これだと、背景の指定全部にかかってしまい 記載していない値は初期値にリセットされる そうなんです（勤勉な方はもう既知の事だと思いますが不勉強な私は今さらきづいた ）。

backgroundの代表的な初期値

• background-color:transparent;
• background-image:none;
• background-position:0 0;
• background-repeat:repeat;
• background-size:auto auto;

例

で、具体例ですが、ついついこういう書き方をしてしまいますよね。

css

li{
 background:#fff url(../..img/sample.png) no-repeat 0 0;
}

これでええやん？って思ってました。
けど、cssを継承していく上で、派生していくと、

css

li.li01{
 background:#fff url(../..img/sample.png) no-repeat -10px 10px;
}
li.li02{
 background:#fff url(../..img/sample.png) no-repeat -20px 10px;
}

と毎回同じ指定を繰り返さねばならず、せっかくコード量を減らそうと試みた結果、同じものを多重に使用してしまうという事に?!

なので、ここでは

css

li{
 background:#fff url(../..img/sample.png) no-repeat;
}
li.li01{
 background-position:-10px 10px;
}
li.li02{
 background-position:-20px 10px;
}

とやってみました（数値は適当です）。

記載していない値は初期値にリセットされる

今さら気づいた事でした（ﾊﾞｶｰ ）。

そんなですが、すこーしでもコード量減らす地味な作業に打ち込んでいきたいと思います。