セレクタのルール
セレクタには、複数の種類があり、またそれらを組み合わせて指定することもできるため、記述方法は制作者によってまちまちです。後のメンテナンス性を考慮して、セレクタの記述ルールを規定しておきましょう。
セレクタの扱い方
要素名のセレクタを、タイプセレクタと呼びますが、これを基本にして、セレクタを拡張することができます。例えば「.examples」のようにclassセレクタだけで指定した場合、CSSを見ただけでは、スタイルの適用対象がどの要素であるのかを判断することができません。制作者以外の人が更新を担当した場合、スタイルの適用対象を特定するために、（X）HTMLを逐一確認しなければならないという手間が発生してしまうかもしれません。従って、どの要素にも適用させたい汎用スタイルとして指定する場合を除き、基本的には、「p.example」のように「タイプセレクタとclassセレクタを組み合わせて指定する」と決めておくと良いでしょう。
/* スタイルの適用対象となる要素が分からない */
.examples {
background-color: #fff;
color: #030;
}
/* スタイルの適用対象はp要素 */
p.examples {
background-color: #fff;
color: #030;
}
子孫セレクタの扱い方
また、子孫セレクタの扱い方についてもルールを定めておくと、後々の更新作業で役立ちます。例えば、次のサンプルのような（X）HTMLがあった場合、「div#category a {...}」としても、「div#category ul li a {...}」としても、どちらも「"category"というid名のdiv要素に包括されるa要素」に対してスタイルが適用されるわけです。この両方の記述が混在すると、コードの内容を理解するのが難しくなりますから、子孫セレクタの記述方法の使い分けルールを明記しておくと良いでしょう。
<div id="category">
<h2><a href="...">カテゴリー</a></h2>
<ul>
<li><a href="...">サブカテゴリー1</a></li>
<li><a href="...">サブカテゴリー2</a></li>
<li><a href="...">サブカテゴリー3</a></li>
</ul>
</div>
使い分けルールの例としては、次のような案が挙げられます。
子孫セレクタの使い分けルールの例
- スタイルの適用対象を広い範囲で汎用的に指定する場合は、子孫セレクタの途中の階層を省略する
- スタイルの適用対象を特定する場合には、子孫セレクタの階層を利用する
先のサンプルの（X）HTMLソースで言えば、「h2要素内のa要素も、ul要素内のa要素もスタイルの適用対象としたい場合」が（1）にあたります。この場合、下記サンプルの最初の例のように、子孫セレクタの階層を利用して記述するよりも、その下の例のように、子孫セレクタの途中の階層を省略して、まとめてしまった方がコードを簡略化することができます。
div#category h2 a {
color: #00c;
background-color: transparent;
}
div#category ul a {
color: #00c;
background-color: transparent;
}
div#category a { /* 途中の子孫セレクタを省略 */
color: #00c;
background-color: transparent;
}
一方、スタイルの適用対象を特定し「div#category内のh2要素内のa要素」と「div#category内のul要素内のa要素」のそれぞれに、異なるスタイルを適用させたい場合が（2）にあたります。この場合は、子孫セレクタの階層を利用して次のように記述します。
div#category h2 a {
color: #000;
background-color: #fff;
}
div#category ul a {
color: #fff;
background-color: #000;
}
このように使い分けルールを規定しておくと、スタイルの適用範囲を特定しやすく、現場の混乱を防ぐことができるでしょう。
セレクタマップの利用
また、別途、セレクタのツリー構造を示した「セレクタマップ」を作成しておくのも有効です。子孫セレクタを省略する場合であっても、「セレクタマップ」と照らし合わせて使用することで、スタイルの適用対象を理解しやすくなります。
