シングルラインCSS

2011.03.04crossnodeCSS


「シングルラインCSS」という言葉を初めて耳にした人は一体何が始まるのかと思ったかもしれませんが、単純にシングルラインつまり1行で書くという意味です。CSSを記述する際に、セレクタ名の記述で1行、プロパティ1つにつき1行、閉じカッコで1行、という具合に書く人が多いかと思います。しかし、この書き方だとセレクタ1つに対して定義する際に最低でも3行は必要なので、セレクタが増えるほどCSSが縦に長くなり見通しが悪くなっていきます。そこで、1つのセレクタについて1行で記述しようというわけです。

ということで、複数行で記述するマルチラインCSSと、シングルラインCSSのソースを見比べてみましょう。
CSSの内容は全く同じですがソースの見え方がまるで違うものになっています。それぞれ長所と短所がありますので、ソースと合わせてご参照ください。

00 : マルチラインCSS


body {
     margin: 0;
     padding: 0;
}
table {
     border-collapse: collapse;
     border-spacing: 0;
}
img {
     border: 0;
}
ol,ul {
     list-style: none;
}
caption,th {
     text-align: left;
}
h1,h2,h3,h4,h5,h6 {
     font-size: 100%;
     font-weight: normal;
}

セレクタ単位で見ると、プロパティが縦にキレイに並んで見やすいですが、セレクタ同士の相関関係を把握したり優先順位を確認する際など全体を管理するという視点からは、冗長な印象は否めません。

01 : シングルラインCSS


body { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0;}
img { border: 0;}
ol,ul { list-style: none;}
caption,th { text-align: left;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal;}

マルチラインCSSの逆で、セレクタ名がずらりと並んいるので全体としての見通しは良くなっています。
以前取り上げたOOCSS(オブジェクト指向CSS)と合わせると旧来の書き方とはかなり使い勝手が違って面白いと思います。
サイトの規模や、個人的な好みもありますので、記述の仕方は人それぞれ。一言で何が一番とは言えませんが、こんな書き方もありますよという参考までに、よかったらお試しあれ。


ページトップへ