スタイルシートマニア

ソースは見やすく分かりやすく | ホームページカスタマイズ Tips

これはプログラムだろうがHTMLだろうがCSSだろうが同じことですが、自分で見ても上から順番に読み解いていかなければ問題の場所へたどり着けないようなソースは不親切ですし、プロの仕事とは呼べないでしょう!

まあどの書き方が見やすいかなんてものは人それぞれなんで自分が一番分かりやすい書き方のルールを作りましょう。

ちなみに僕のルールは

セレクタ {
      プロパティ: 値;
      プロパティ: 値;
}

っといった感じのルールで作っています。

普通じゃん!っと思われる方もいるでしょうが(^^;)

これが、

セレクタ {
プロパティ: 値;
プロパティ: 値;
}

だったり

セレクタ { プロパティ: 値; プロパティ: 値; }

だったりすると、セレクタがどこにあるのか判断しにくくなるので、僕は一番最初の書き方を採用しています。あまり実感がわかないかもしれませんが、実際これが多数並んでいると意外とセレクタを探すのが大変でイライラするものです。

後ここまで気にすることはないのかもれませんが、子孫セレクタをやったらめったら使いまくったり、(,)カンマで区切って適応先のセレクタをやたら増やすのは、後々ややっこしくなる可能性があるので僕としてはおすすめできません。

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す