配色管理用の CSS をモジュール化する

今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。）

（なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。）

配色管理モジュールの作成方法

1. 色に関するスタイルをすべて、この配色管理モジュールに集約する。
2. 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。
3. セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴）
4. セレクタは、浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述する。（上書き予防）
5. 階層の深さがすぐに把握できるように、セレクタは冗長に表記する。
6. IE 6- 用のスタイルを別途定義しない場合は、子セレクタ・隣接セレクタ・属性セレクタなどは使わず、子孫セレクタで構造を記述する。

ブランディングのためのスタイルガイド、もしくは Color glossary などと考え方が若干似ていますが、要は色に関する設定だけをモジュール化して、独自の CSS ファイルに別出します。

• ［参考］Color glossary

配色管理モジュールのサンプル

論理構造も色も適当なデッチ上げですみませんが、サクっとサンプルを用意してみると、大体こんな感じです。

配色管理モジュール（color.css）のサンプル

/* 配色管理モジュール - Color management module
======================================
- スタイルガイド文書: [url]
- CSS は後ろに記述されているものほど、適用優先順位が高くなるため、必ず浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述すること。
====================================== */
/* 背景色: #FDFDEB（淡い乳白色）*/
body {

　background: #FDFDEB;

}
/* 背景色: #7EBE5D（パステルグリーン）*/
div.header div.hot-entries,
div.header div.hot-entries h2 {

　background: #7EBE5D;
　color: #fff;

}
/* 文字色: #45392A（濃い茶色）*/
div.contents div.entry .body h3,
div.contents div.entry .body h3 a {

　color: #45392A;

}
/* リンクテキスト: #AC0605（濃い赤）*/
div.contents div.entry div.body h3 a:hover,
div.contents div.entry div.body h3 a:focus,
div.contents div.entry div.body h3 a:active {

　color: #AC0605;

}

上位 CSS（screen.css）に配色管理モジュールをインポート

@import url("color.css") screen;

この管理法の方が配色を変える時に、目的の行を探す手間が激減しますし、カテゴリーや季節ごとに配色を変える場合でも、統一感を保ったまま、容易に配色を変更できるようになります。初めてソースを覗く人にも優しいコーディングは、大規模サイトの開発やメンテナンスであっても、少なからずいい影響を与えるはず、と思ってはじめた手法です。（ただし、このブログでは、この手法は使ってません。というか、ココログでは HTML の head や body の基本構造がカスタマイズできないようになっているので、このブログでは HTML や CSS の設計は放棄してます。(- -;ゞ）

デザインはセマンティクスに依存する？

色彩デザインの心得がある人ならすでに察しがついていることと思いますが、心得のない方（僕もどちらかというと、こちら側の人間ですが）でも実際に幾つかの事例をこなしてみると、次第に色とセマンティクスの間に相関関係があることや、上記のような色彩管理法のメリットが分かってくるのではないかと思います。たとえば、閲覧者を優先的に誘導したいコンテンツほど、背景色を濃くしてたり、文字色とのコントラストを強くしてたり..とか。カラースキームなんかも、"論理的に" 色やその組み合わせを絞り込んでいくためのものですよね。

意外にあまり語られないことですが、（Louis Henry Sullivan の Form follows function（形態は機能に従う）ではありませんが）本来、見栄え（≒デザイン）は文書の構造（≒セマンティクス）に依存すると僕は思ってます。たとえば色の濃淡や、ボックスの大小、文字の太さなどは、しばしば、そのコンテンツの "重要度" というセマンティクスと密接に関係しています。仮にもし、この捉え方が間違っていないとすれば、(X)HTML 側だけでなく、見栄えを定める CSS の方も、本来、親文書（HTML）の構造セマンティクスを基にして、整理していった方が管理しやすいのではないでしょうか？

実際は、この表裏逆...文書構造（セマンティクス）が見栄え（デザイン）に依存してしまっている事例の方が、比較にならないほど圧倒的多数となっているのが現状なのはご承知の通り。

関連エントリー

• CSS セレクタ、グループ化の落とし穴
• コード共有のためのネーミングルール
• 見出しの画像をサイトマップ風 CSS で管理