ノンプログラマーズ・スタイルシートライティングTips

CSSはそれ自体、それほど高度な知識を必要とする言語では決してないが、CMSやブログツールのテーマあるいはスキンの開発や、中～大規模ウェブサイトにおけるCSSの開発には、効率的で合理的なCSSの組織化、スタイリングルールなど多くのプログラマ的観点が必要になってくる。
そこで今回はプログラムの経験がないCSS開発者のための、スタイルシートライティングTipsを紹介しよう。

1. reset.cssの活用

クロスブラウザ対応がCSS開発者にとって最大の頭痛の種。
その頭痛を最小限に止めるために、ブラウザがデフォルトで設定するスタイルを一旦リセットしてしまうためにreset.cssを利用しよう。

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
} 

Eric’s Archived Thoughts: Resetting Again
私はこのreset.cssを利用しているが、他にもYahoo!が公開しているYUI reset.cssなども活用されている機会は多い。

2. IEハックは使わず、コンディショナルコメントを活用する

クロスブラウザの頭痛の種であるIE。そのIEをターゲットにした様々なハックが発見されている。
例えば、

 selector { *property: value;  } /* IE6&IE7 */
selector { _property: value;  } /* IE6 ONLY */ 

こうすることで、1行目で宣言した命令を、2行目で宣言した命令で上書きするため、この2行でIE7とIE6を別にターゲットにしたCSSを書くことができる。
CSSハックを利用することで、CSSファイルを1つにできることは利点ではあるが、メンテナンス性を考えると、IE コンディショナルコメントを利用することが望ましい。

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

コンディショナルコメントを活用すれば、このようにそれぞれのIEバージョンに対応したCSSファイルを読み込むことが可能だ。
＊1行目はIE6のみ、2行目はIE7のみをターゲットにしている

IE8ではIE6、IE7よりバグが少ないブラウザではあるが、バグはもちろん存在する。

 <!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" /><![endif]-->

とすれば、IE8のみをターゲットにすることが可能だ。

3. ID名、クラス名には位置を示す単語を避ける

 <div id="page">
    <div id="leftColumn">左コラム</div>
    <div id="rightColumn">右コラム</div>
</div>

2カラムのデザインの場合を例に、上記のようなHTMLを書いたことはないだろうか？
デザインが変更になり、右コラムが左コラムに変更になる場合などに非常に困るネーミングルールだろう。

 <div id="page">
    <div id="main">左コラム</div>
    <div id="sidebar">右コラム</div>
</div>

このようにしておけば、左右を入れ替えても齟齬がない。自分以外の誰が見ても不思議ではないコードを書くことが最良のメンテナンス性能であるため、IDとくらすのネーミングルールはしっかりと考えておくことをおすすめする。
同じく、top-や、bottom-というような場所を指し示す前置語を利用するのもあまりおすすめはしない。

4. CSSの継承を活用する

 <div class="parent">
<h2>見出し</h2>
<p>パラグラフと<strong>強調</strong></p>
</div>

というHTMLを例にして、

 .parent h2 { color: #333; }
.parent p { color: #333; }
.parent strong { color: #333; } 

というように、文字色を墨色(#333333)にする場合、

 .parent { color: #333; } 

とすれば、親要素(div.parent)で宣言された文字色は子要素に継承される。
このほうがコードは短く、色の変更も1ヶ所のみ対応すればいい。
CSSには継承するプロパティと、継承しないプロパティがあるので、下記を参照してほしい。
スタイルシートの継承 – スタイルシート
実際に全部を覚えるのは大変なので、色、文字に関わるプロパティ、そしてリストに関わるプロパティは継承する。
と覚えておけば、問題ないだろう。

5. 同じ値のセレクタを結合する

 h1 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 

というように同じ値を持つ宣言であれば、

 h1, h2, h3 {
    font-family:Arial, Helvetica, sans-serif; font-weight:normal;
} 

とするほうが、より見やすいコードにできる。
リーダビリティとファイルサイズを優先する場合、可能な限り結合できる宣言は結合するべきだが、
ファイルサイズを犠牲にして、すこしメンテナンス性を向上させるために、私はしばしばこのルールを破ることがある。
例えば、このブログのCSSを例にすると

 .single #bd .article h2 {
	color: #CE5C00;
	font-size:18px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h3 {
	color: #CE5C00;
	font-size:16px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h4 {
	color: #CE5C00;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h5 {
	color: #CE5C00;
	font-size:12px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h6 {
	color: #CE5C00;
	font-size:10px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h1,
.single #bd .article h2,
.single #bd .article h3,
.single #bd .article h4,
.single #bd .article h5,
.single #bd .article h6 {
	margin: 0 120px 5px 250px;
	padding: 5px 0;
} 

というように、結合するプロパティとそうでないプロパティを分けている。
結合したのは、マージンとパディング。
結合しなかったのは文字に関するプロパティ。
現時点ではh1～h6まで文字に関するプロパティも結合できる同じ値に設定しているが、
将来に変更できる環境を用意してある。
プロジェクトに応じて、少し未来ための拡張性を残しておくことは、メンテナンス性を向上させる策の1つだろう。

5. プロパティはアルファベット順に

 selector {
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
} 

プロパティはアルファベット順に並べておく。Firebugでスタイルを見ると、同じくアルファベット順に並べ替えているのがわかる。
私はここでもルールを破ることがある。

 .selector {
	position :absolute；
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
} 

というように、position: absoluteを宣言する場合、位置を表すプロパティであるtop,right,bottom,leftはインデントして、
上記の順番に並べることにしている。アルファベット順に並べてしまう方が、わかりづらくなるプロパティも存在するので、
このガイドラインの上に、役割に応じた対応をするほうがいいだろう。

６. 複数行の宣言は複数行、1行の宣言なら1行で

CSSのコードフォーマットには、1行派と、複数行派がいる。
前者はすべての宣言を1行で書き、後者は宣言は複数行で書く。
前者は当然、後者とくらべてファイルサイズが小さくなるが、リーダビリティが高いとは言えない。
後者はリーダビリティは高いが、ファイルサイズが大きくなる。
私は折衷派だ。

 .selector { property :value； }
.selector {
	property :value；
	property :value；
	property :value；
	property :value；
} 

1行で宣言が完結する場合は1行で、複数行に渡る場合は、複数行で書く。
ファイルサイズも、リーダビリティも私にはちょうどいい。
私は個人の場合のプロジェクトでは上記の方法でCSSを書き、サーバにアップロードしているが、仕事ではほぼ欠かさず、CSSを圧縮している。
私はJavaScriptの開発を行うこともあるので、
Online YUI Compressorを使って、CSSを圧縮している。
作業用とアップロード用で別ファイルとしているが、
圧縮したCSSにリーダビリティを復活させる場合や、フォーマットを後回しにしてしまった場合の救済として、
Styleneat – CSS Organizer
を使用することもおすすめする。

7. CSSプロパティの短縮形を活用する

 selector {
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 1px;
} 

とした場合、

 selector {
	padding: 1px 2px 1px 1px;
} 

と短縮形を使うと1行にできる。
paddingやmargin、border-widthなどで、同じように短縮形を使える他、fontやbackgroundでも使える。
詳しい説明は別の機会にするが、覚えておいて損はない。

8. コメントを使って、CSSを組織化する

何度も繰り返すが、メンテナンス性のメインテーマは自分以外の人間が読み解くことができること。
CSSのコメントを利用し、CSSファイルを組織化することで、追加や削除、変更などが簡単にできるようにしておこう。
プロジェクトの規模やデザインに応じてコメントを変更する必要はあるが、

/*--------------------------------------------------------------------
	1. COMMON
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	2. HEADER
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	4. MAIN
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	5. SIDEBAR
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	6. FOOTER
--------------------------------------------------------------------*/

というように、セクションごとにコメントを書き込んでおく。

9. コメントを使って、CSSの目次を作成

8. と同じくコメントを活用して

 /*--------------------------------------------------------------------
	1. COMMON
	2. HEADER
	3. MAIN
	4. SIDEBAR
	5. FOOTER
--------------------------------------------------------------------*/ 

というように、目次を作成しておく、このようにしておくことで、あまりおすすめはしないが、1ファイルが数千行に及ぶような場合でも、
エディタの検索機能を使えば、目的の場所まですぐにたどり着ける。
もっともFirebugを活用すれば、何行目に宣言があるのか教えてくれるが、このように目次を作成し、8.のようにセクションごとにCSSを書く癖をつければ、無駄な記述も少なくなり、メンテナンス性も向上する。

10. ガイドラインを作成し、それに沿った記述を心がける

多くのプログラミング言語もそうであるように、HTML、CSSにも同じ結果を得るために、様々な方法が存在する。
今回紹介したティップスもその１部。
ガイドラインを作成し、プロジェクト全体で、あるいは自分自身でその遵守を心がける。
それ自体がもっとも有効なメンテナンス性向上の近道だろう。