技術ブログ 2016.01.21

CSSの記述方法について考えてみる

明けましておめでとうございます。

2016年の初更新となります!今年も宜しくお願い致します。
朝から、まさかの下痢によって危うく遅刻するところでしたがなんとか間に合いました。

何故、家では出る気配がないのに外に出てから始まるのか・・・
さて、年始一発目の更新から汚い話をしてしまいましたが

今回はCSSの記述方法についてです。

イーナで働かせていただくようになり、工数や作業の効率化を意識するようになってから
真っ先にやり方を変えたのがCSSの書き方です。

今までは下記のような書き方をしていました。

これまでの書き方

body#Index #Header h1#SiteLogo{
width:210px;
height:220px;
position:absolute;
top:0;
left:50px;
}
body#Index #Header h2#Lead{
width:80px;
height:220px;
position:absolute;
top:0;
left:290px;
}

恐らくは一般的な記述方法ではないでしょうか?
プロパティ毎に改行を入れて書いていました。

見やすいのは見やすいのですが、あまりに縦に伸びすぎて
セレクタを探すにも、ずーっとスクロールせねばならず一苦労でした。

そこで、下記のように方式を変更しました。

現在の書き方

body#Index #Header h1#SiteLogo{width:210px;height:220px;position:absolute;top:0;left:50px;}
body#Index #Header h2#Lead{width:80px;height:220px;position:absolute;top:0;left:290px;}

最初は見づらいかもしれませんが、すぐ慣れましたし
こちらの方が圧倒的に縦に短くなり、目当てのセレクタがすぐ見つかって更新もしやすくなりました。