皆さんこんにちは。Kanoはあるけど彼女はいないアンドレです。

突然ですが、皆さんは良いCSSとはどういうものだと思いますか？
僕は常々良いCSSを書きたいと思いながら、その定義が自分の中で曖昧であることに気がつきました。

そんな状態で書けるはずないじゃないか！

というわけで、今回は良いCSSとはどのようなものか、自分なりに考えてみました。

求められること

まず、修正の必要のないCSSというのは基本的に存在しません。なぜならWebサイトが構築・運用されていく中で、デザインの変更や機能の追加といったものがほぼ必ず発生するからです。そこで１つ、

修正しやすい

ことが重要です。
また、仮に今CSSに触れるのが自分だけだとして、今後もそうであるという保証はありません。あるいは次に触れる機会が１年後、ということもあるかもしれません。であれば、

理解しやすい

ことも要件の１つでしょう。
そして、コード全般に言えることですが、冗長な部分がないようにという意味において、

短い

ものであれば理想的ですね。では、これらを実現するにはどうすれば良いでしょうか。

その方法

このようなことに思い至った人間は自分が初めて…というわけでは当然なく、先達の凄腕エンジニアの方々が既に色々な「CSS設計」というものを考案されています。SMACSSやBEMなどは聞いたことがある方も多いのではないでしょうか。
それぞれについての詳述は割愛しますが、共通しているのはきちんとしたルールに基づいてユニークなクラス名を付けたり、スタイルのコンポーネント化をしていることです。それによって得られるものを、先ほどのポイントに照らし合わせて見てみましょう。

修正しやすい

ユニークなクラス名を付けることにより、そのスタイルの影響範囲が分かりやすく、より確実に切り分けることができます。よって、その後のスタイル追加や変更の際の修正や拡張が非常にやりやすいです。
また、セレクタの指定が最小限で済むため、パフォーマンスも良くなります。
（コード例）

/* 文書構造によってスタイルの汚染が発生するパターン */
article .title {
  ...
}
section .title {
  ...
}

↓

/* それぞれのタイトルをユニークに */
.article__title {
  ...
}
.section__title {
  ...
}

理解しやすい

一定のルールに基づいて付けられたクラス名は、それそのものが構造や関係を表すため、他の人が見ても分かりやすいです。BEMでは大元であるBlockというものに対して、Element（要素）であれば__（アンダースコア2つ）、Modifier（派生バリエーション）であれば_（アンダースコア1つ）としています。
例えばtext-specialというクラスがあった場合、それだけではtextというBlockの中のspecialな要素なのか、textというBlockのspecialなスタイルなのかは通常判別できません。
しかしBEM式の命名を採用すれば、.text__specialであれば前者で、.text_specialであれば後者という判別が可能になり、それぞれの関係や構造がより分かりやすくなります。

短い

スタイルをコンポーネント化することで、同じスタイルを何度も書く必要がなくなります。例えば、違う場所にあるリンクのあしらいがある程度共通なとき、その共通部分だけをコンポーネントとして分離しておけば、記述が短くなる上、リンクのスタイルそのものは場所に依存しなくなります。またその際リンクの意味合いを考えたクラスを付ければ、よりHTMLへの依存度を減らすことができます。
（コード例）

.header-link a {
  padding-left: 20px;
  background: url(../images/common/icon_link01.gif) 0 2px no-repeat;
  color: blue;
  font-size: 120%;
  text-decoration: underline;
}
.header-link a:hover {
  text-decoration: none;
}
.footer-link a {
  padding-left: 20px;
  background: url(../images/common/icon_link01.gif) 0 2px no-repeat;
  color: blue;
  font-size: 100%;
  text-decoration: underline;
}
.footer-link a:hover {
  text-decoration: none;
}

↓

/* コンポーネント */
.link a {
  padding-left: 20px;
  background: url(../images/common/icon_link01.gif) 0 2px no-repeat;
  color: blue;
  text-decoration: underline;
}
.link a:hover {
  text-decoration: none;
}
.link.global a {
  font-size: 120%;
}
.link.sub a {
  font-size: 100%;
}

このように、CSS設計というものをきちんと考えることで、CSSの保守性や堅牢性を少なからず高めることができるのです。

まとめ

SMACSSやBEMはそれぞれ１つの方法論であり、そこから派生した考え方もたくさんあります。
そしてそれぞれに長所や短所があり、絶対的な正解はありません。
一つだけ言えることは、いろいろなルール・やり方を見て、自分なりにCSS設計をしっかり考えることで、CSSは確実に良い、強いものになるということです。
僕も自分自身の設計手法を確立できるよう、学び続けていきます！