BLOG

ブログ

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;}

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

CONTACT

ご質問・ご相談は
お気軽にお問い合わせください。

受付時間:平日 9:30〜18:30(土日祝除く)
※メールは24時間受け付けております。

OSAKA Office大阪本社

〒541-0054 
大阪市中央区南本町1-8-14 
JRE堺筋本町ビル9階
詳細はこちら

TOKYO Office東京支社

〒103-0027 
東京都中央区日本橋2丁目2−3 
RISHEビル4F
詳細はこちら