CSS設計とは、クラス名の付け方とファイルの分け方をあらかじめ決めておく取り決めのことです。BEM、OOCSS、SMACSS、FLOCSS といった名前で呼ばれる方式がいくつかあります。

どれも目的は同じで、「ここを直したら、関係ないところが崩れた」を起こさないことです。見た目を作るだけなら設計は要りません。要るのは、半年後に別の人が触るときです。

設計が無いと何が起きるか

• 同じ見た目を作るのに、毎回ゼロから書くことになる
• クラス名が被って、意図しないところにスタイルが当たる
• 打ち消すための !important が増えていく
• 消していいCSSが分からなくなり、誰も消さなくなる
• セレクタがどんどん長くなり、詳細度の勝負になる

!important が数えるほど出てきたら、設計が破綻しているサインです。その時点で直すほうが、積み上がってから直すより安く済みます。

主な方式

BEM

Block（まとまり）・Element（その中の要素）・Modifier（状態や種類）の3つで名前を作ります。card__title、card__title--large のような書き方です。名前が長くなる代わりに、どこに属するクラスなのかが一目で分かります。

OOCSS

見た目の部品を、置き場所から切り離して使い回す考え方です。ボタンの形と、そのボタンがページのどこにあるかを別のクラスで表します。

SMACSS / FLOCSS

CSSをどのファイルに書くかの分類です。土台・レイアウト・部品・状態のように層を決めて、上書きの向きを一方向に揃えます。FLOCSS は日本で提案されたもので、BEM の命名と組み合わせて使われることが多い形です。

実務ではどこまでやるか

方式の名前にこだわる必要はありません。大事なのは、そのサイトの中で一貫していることです。BEM と別の書き方が混ざった状態が、いちばん触りにくくなります。

Tailwind のような考え方

近年は、クラス名を考えず、あらかじめ用意された細かいクラスを HTML に並べる方法も広く使われています。命名で悩まなくて済む一方、HTML が長くなり、同じ見た目を複数箇所で書くことになります。どちらが良いかではなく、更新する人が HTML を触れるかどうかで決まります。

引き継ぎのときに見るところ

1. クラス名の付け方が途中で変わっていないか
2. CSSがどのファイルに分かれていて、読み込み順がどうなっているか
3. 使われていないCSSがどれくらい残っているか
4. !important がどこで使われているか

当社でお預かりする改修案件では、まずこの4点を見てから見積りを出しています。設計が残っていれば部分的な修正で済みますし、崩れていればCSSの作り直しを含めてご提案します。