CSSの書き方の違いについて。（オーバヘッドの大小など）

Question

よくやることなのですが、
最初に

padding:20px;
```と書いていて、
後から下だけ変えようと、
```ここに言語を入力
padding:20px;
padding-bottom:10px;
```と追記することがあります。

本当は良くない書き方なのかも、
下記２番の方が良いのかな、と気にしながらも、
大したオーバーヘッドになるわけでもないだろうし、
私的には、下記の３つを比べても
とてもわかり易くて好きな書き方だったりするので
ま、いっか・・・。と流しているのですが、
みなさんはどうしていますか？どうあるべきでしょうか？

もし、極力オーバーヘッドの無いよう記述するとした場合、
下記の３つのではどの順に小さいでしょうか？
```ここに言語を入力
１．
  padding:20px;
  padding-bottom:10px;

2.
  padding:20px 20px 10px 20px;

3.
  padding-top:20px;
  padding-left:20px;
  padding-bottom:10px;
  padding-right:10px;

Answer 1

オーバーヘッドは気にせずに、一番読みやすい形で記述して、ツールでCSS圧縮して、それを使用するようにしてます。
最近のツールは冗長性を排除して最適化してくれるようです。

例えば下記のサイトだと、１．のコードは、

Refresh-SF - Online JavaScript and CSS Compressor

padding:20px 20px 10px;

と書き換えてくれます。

Answer 2

候補には出ていませんが、自分なら

/* その4 */
padding: 20px 20px 10px;

のように書くと思います。3つだけ値を指定すると、「上 左右 下」として解釈されます。ただ、これでも「左だけ変える」場合には使えないので、その時は1のように「全部かける＋左だけ上書き」としています。

なお、CSSフレームワークのような巨大なCSSを作るのでないかぎり、「CSSの書き方がパフォーマンスに与える影響」は、ほとんど無視して大丈夫でしょう。

Comments

[nobuzoh]

圧縮して104KBと、bootstrapのcssより少し大きい位です。
体感する程パフォーマンスが落ちてないことも、
ま、いっか・・・。となる要因ではあります。

[hatena19]

圧縮しているなら、下記の回答でも書きましたが、そのときに最適化されていると思いますよ。最適化の程度はツールによって異なるかもしれませんが。