CSSベタープラクティス殴り書き

ベターなプラクティスについて アンチパターン 含めて考えてみる。

項目

• セレクタの適応範囲が必要以上に広くない
• セレクタの詳細度ができるだけ小さく保たれている
• セレクタに不必要な要素名（タグ名）での指定がない

セレクタの適応範囲が必要以上に広くない

/* Bad */
span {
  color: red;
}

上記例ではページ全てのspanに影響を及ぼす。対象となる箇所をコーディングしている時だけは問題なくとも、あとあと大きな障害となる

/* Good */
.warning {
  color: red;
}

必要な箇所のみが対象となるよう、CSSを設計する

セレクタの詳細度ができるだけ低く保たれている

あるセレクタの詳細度が高い場合、そのスタイルを打ち消すためにさらに詳細度の高いセレクタが追加される傾向がある

/* Bad */
#main .list {
  margin: 0;
}

/*　これは有効にはならない　*/
.list {
  margin: 0 0 20px 0;
}

/*　さらにクラスを追加して対応してしまう　*/
#main.category01 .list {
  margin: 0 0 20px 0;
}

/*　その場限りの対応を続けるうちに複雑なセレクタが増えていく　*/
#main.category01 #nav .list {
  margin: 0 0 20px 0;
}

/*
 最悪なパターン
 詳細度が高い
 範囲が広範囲である
*/
#wrapper ul {
  margin: 0 0 20px 0;
}

/* Good? */
.list {
  margin: 0;
}

/*　必要最低限の追加で対応　*/
.list.list--hoge {
 margin: 0 0 20px 0;
}

セレクタに不必要な要素名（タグ名）での指定がない

/* Bad */
nav.list {
  margin: 0;
}

上記のようなセレクタでは要素名(nav)は必要ない。必要のない詳細度があがってしまう。

/* Good */
.list {
  margin: 0;
}

クラス名のみで十分である。

/*
  クラス、要素名でごちゃごちゃ
  要素名は必要ない
  こういう場合liは必要ないけど書いてしまいがち
*/
div.mainContent ul.list li a.blank {
  margin: 0;
}

/* リファクタリング! */
.mainContent .blank {
  margin: 0;
}

/* もしくは */
.blank {
  margin: 0;
}

ただし、以下のような場合はOK

.gnav a {
  display: block;
}

<ul class="gnav">
  <li><a>メニュー1</a></li>
  <li><a>メニュー2</a></li>
  <li><a>メニュー3</a></li>
</ul>

要素名をセレクタに含めても影響範囲が狭く保たれている、またHTMLの構造も大きく変更されることがない。