Go my way

CSSを使う理由のひとつに、サイトを効率的に管理できる点が挙げられます。しかし、統一性のないCSSを書いていたのでは、このメリットが十分に生かされません。今回は「管理しやすいセレクタ」についてまとめてみました。

セレクタの書き方は人それぞれだと思いますが、自分の中で統一したルールを持っていないと、あとで困ることになります。自分が気を付けている点は、以下のとおりです。

1. id、classの要素名は必ず書く
2. 子孫セレクタをうまく使い、シンプルなコードを書く
3. セレクタはできるだけ詳しく書く
4. 個別性を意識し、!importantは使わない
5. CSSハックは極力使わない

id、classの要素名は必ず書く

noteというclass名を付けた場合、「.note」と書いても問題ありませんが、どの要素に付けたのかがわかるように要素名は必ず書きます。たとえば、「p.note」のような感じですね。

子孫セレクタをうまく使い、シンプルなコードを書く

id、classをやたら付けたサイトを見かけますが、子孫セレクタをうまく使えばもっとシンプルに書くことができます。属性セレクタ、隣接セレクタ、子供セレクタなどを使えばもっとシンプルに書けるのですが、Internet Explorer 6以前が対応していないため、現時点では使う機会は少ないでしょう(これらのセレクタは、Internet Explorer 7で対応されました)。

セレクタはできるだけ詳しく書く

セレクタを書く際は、XHTMLのツリー構造がわかるように詳しく書きます。こうすることで、いちいちXHTML文書を開かなくても、大体の見当がつくようになります。さらに、詳しく書くことで個別性が高まり、意図しないスタイルが適用されるのを防ぐことができます。

div#content ul li {
    color: red;
}

個別性を意識し、!importantは使わない

セレクタを正しく使うことにより、セレクタの個別性が高まり、!importantを使う必要がなくなります。基本的に、!importantは使わないほうが良いでしょう。

CSSハックは極力使わない

最近のモダンブラウザはCSSのバグも減ってきています。後方互換を考えた際、どうしても必要な場合のみハックを使い、極力使わない努力をしましょう（そうすることでスキルも上達します）。

最低限これらのルールを守れば、そこそこ管理しやすくなるのではないでしょうか。

Tag

CSS