CSSを少しできるようになると気になることがある。それは自分/他人の書いたCSS、超絶読みにくくない？ と言うことだ。ことプログラミングであればみなさん高尚な設計理論や開発手法をブツが、CSSのことは割と適当である(偏見)。

もちろんCSSにもきちんと設計手法がある。そこを知らずに無手勝流でCSSを使うと後で後悔することになる。

CSS設計の教科書は、そんな無手勝流でやっていたCSSを秩序あるものに変える理論を体系的に学ぶことができる。

どんな感じのことを学べるか、少しだけ語りたいと思う。

悪いCSS設計の例

まずは黙って下記のCSSを見て欲しい。ブログページ内でのよくあるボタンデザインのCSSだ。

良くある。死ぬほどある。CSS自体の書き方としては全く間違っていない。実際このレベルのマークアップでLPなどを作ったとしてもなんら問題ない。

で、意気揚々とデザインカンプを見ながら作っていたら、実はブログページだけでなく、ブログ一覧でもこのボタンが使われていることが判明した。マークアップとCSSはこうなる。

良い感じになってきた（悪い意味で）。CSSの重複がありそもそも blog-post と blog-archivesというidの意味合いも良くわからなくなってきた。でも修正することはできない。前例を踏襲しないとマネージャーに怒られるからだ。

で、さらに良くあることに、納期前日に「ブログ一覧のボタンは赤にしてくれ」とこだわりと品質の追求とわがままを勘違いしているUIデザインの理解度ゼロのデザイナーから指示が出た。

「何のために赤くするんですか？」などと聞いてはならない。そこには意味などないからだ。もしくは自称センスの良いクライアントからの鶴の一声でそうなったのかもしれない。で、憐れなコーダーは困った。納期も迫っているし、デザイナーの野郎が急に言うから悪いのだ。だから少し手抜きをしてこんな感じに実装した。

終わりの始まりである。重複部分は多いし、htmlの構造に大きく依存しているので、マークアップがちょっと変わったらデザインが崩れる可能性がある。ボタンが増えるたびにこのコピペCSSが大量に生み出されることになる。散々ボタンを増やしたあとで、万が一全てのボタンのトンマナを変えたいとあの憎らしいクライアントが言いだしたとしたら。どうなるか。想像に難くない。

とは言え、まだこのCSSは簡単に読める。読める、が、この感じで1ヶ月、いや1週間CSSを実装し続けたらクソCSSは簡単に出来上がる。これの何が悪いって、例えば激務が嫌になったコーダーが辞めた瞬間、重複と冗長にまみれたCSSはもはや誰もメンテナンスすることができなくなる。似たようなCSSが大量にあるが、どこを直したらどこが変わるのか分からない。ネストの深いセレクタにやられて、CSSを上書きしようにも詳細度の違いで全く自分の修正が適用されず泣く泣く!important を使う。一箇所修正したら他のデザインに影響を与えていないかを全画面確認する必要がある。などと言うバカげた仕事が発生する。

こういう経験をしたことがあるフロントエンドエンジニアはクソほどいると思う。

バカにしているように映ると思うが、これはほとんどのWebサイトで起きていることだ。体感としてはWebサイトの90%ぐらいで発生している(偏見)。そして僕自身もこう言うCSSを大量に生み出してきたことを告白する。こんな簡単なボタンデザインですら業務をこなしている間にここまで複雑になり得る。どこかの偉い幹部/クライアント/デザイナーのせいでデザインカンプが2転3転4転する現場が多い昨今において、このまずいCSSができるのは必然だ。

と上を批判することで自分を落ち着かせているフロントエンドエンジニアがいたら、言いたい。90%ぐらいはお前のせいである。上が2転3転するからCSSの設計が不味くなるのではない。本当はあなたはCSSの設計の仕方なんて知らないはずだ。だってそれは大抵のスクールでは教えてくれないし、きちんとCSS設計をしているコーダーは僕の観測範囲だとごくわずかだ。皆、雰囲気でCSSをやっている。

そこで諦めるのであれば、あなたの年収は一向に上がらない。

まあ待て。そう怒るな。逆に言えば、CSS設計をできれば、多くのコーダーに差をつけることができる。CSS設計の教科書を読んだ後の僕であれば、こんな感じに直す。

正しいCSS設計の例

CSS設計の教科書に書かれていることを実施した結果こうなった。

記述がシンプルになったことがお分かりだろう。やったことは2点。

マークアップ依存のCSSを排除

#blog-post a.button

などの、htmlの構造に依存するCSSを排除し、

a.button

だけでボタンCSSを実現。これで、ブログ記事本文だろうが、ブログ一覧だろうがどの場所にあってもボタンを使用することができる。

ボタンのバリエーションはBEMのModifierの概念を使う

青いボタンを

.button–primary

で。

赤いボタンを

.button–secondary

で表現することで、容易にボタンバリエーションを変更できるようにしている。

BEMで言う所の、.button の部分がBlock要素、.button–primary の部分がModifierとなる。Block要素(.button)としてButtonの共通的な骨格をCSSで表現し、Modifierクラス(.button-primary, .button-secondary)を変更することで、色味や大きさなどのバリエーションを変更できるようにしている。

勘のいい人はお気づきかもしれないが、これはまるっきりBootstrapの構造と同じである。そうBootstrapはBEMを利用しているのだ。コンポーネント志向が徹底されており、だから破綻なく使いやすい。

CSS設計の教科書まとめ

てな感じのことが、CSS設計の教科書にはふんだんに書かれている。また、あまり知られていないCSSの規則についても序盤で説明しているので、CSSでなんとかサイトを作れるようになった初心者から中級者にオススメの本だ。

イケイケのフロントエンドエンジニアや、CSS職人を自称するなら教養として是非読みたい一冊である。