維持しやすい CSS を考える

• wg:Maintainable CSS

CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。

CSS を作成する際に自分が考えること

自分でも改めてまとめてみると何か新しい事が見えてくるかもしれないし、コメントで何かヒントやアイデアを教えてくれる人も居るかもしれないなぁとか思ったんで、ちょっとまとめてみた（上記サイトと被ってるのが多いけど）。

• CSS ファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックする。
• どれだけ些細な事でも、コメントによる注釈は重要。1 年後に見たときに、何故この指定があるのか考えてしまわないかを常に念頭に置き、ちょっとしたことでも必ずコメントを付けておく。
• 一覧性や探しやすさを考え、出来るだけ CSS ファイルは一つに収めるようにする。
• 規模の大きいサイトの場合は、複数の CSS ファイルで構築する。
• 複数の CSS ファイルを採用する場合、基本となる base.css にはブラウザデフォルト値のリセットや全ページ共通で不変なパーツの指定（ヘッダやフッタ、セクション等）、各要素（hn、p、ul 等）のデフォルト値の設定を記述。それ以外は style.css として、各ページごとの独自の指定をコメントでグルーピングして記述、状況によっては、フォーム関連の部品等の特定の指定が大きくなるときは別ファイルにする。
• やむを得ずCSS ハックを使うとき、なるだけならバックスラッシュ系を使わない方法がないか考え、あまりトリッキーではないハックを選択する。
• CSS ハックを行う際、必ずコメントで対象ブラウザと事由を明記する。
• 子供セレクタ、子孫セレクタ、隣接セレクタ等のパターンマッチの規則を活用し、スタイルのために後から (X)HTML に ID や Class を付与し直さないようにする。

こう見ると、大したこと考えてないなw。まぁ、どうすれば管理しやすいかってのは人それぞれだろうし、ある方法が万人にとって受け入れられるってわけじゃないってのは当たり前か。