CSSは「書くこと」よりも「直すこと」の方が圧倒的に多い。
つまり本質は、いかに変更しやすい状態を保てるかにある。
最初から完璧に設計する必要はないが、
“後から壊れない構造”を意識しているかどうかで、開発コストは大きく変わる。
この記事では、保守しやすいCSS設計の本質を整理する。
保守しづらいCSSの特徴
まず、何がダメなのかを明確にする。
保守しづらいCSSには共通点がある。
セレクタが深すぎる（例：.header ul li a span）
命名が曖昧（.box, .item, .contentなど）
どこに影響するかわからない（グローバルに効いてしまう）
スタイルの責務が混ざっている（レイアウトと装飾が同居）
これが何を引き起こすかというと、
「1箇所直すと、別の場所が壊れる」状態
この時点で設計は破綻している。
本質は「影響範囲をコントロールすること」
保守性の本質はシンプルで、
変更の影響範囲を限定できるかどうか
これだけ。
つまり、
このクラスを変えたらどこに影響するか分かる
他の箇所に副作用が出ない
この状態を作るのがCSS設計。
クラス設計を分離する
まずやるべきは「役割の分離」。
NG例
.card {
margin: 20px;
background: #fff;
border-radius: 8px;
}
これだと、
レイアウト（margin）
見た目（background, border）
が混ざっている。
OK例
.card {
background: #fff;
border-radius: 8px;
}
.card-wrapper {
margin: 20px;
}
こうすると、
見た目を変えたい → .cardを触る
余白を変えたい → .card-wrapperを触る
責務が分離される。
セレクタは浅く、シンプルに
深いセレクタは依存関係を強くする。
.header ul li a span {
color: red;
}
これは構造に依存しすぎている。
HTMLを少し変えただけで壊れる。
代わりにこうする。
.nav-link-text {
color: red;
}
構造ではなく意味に依存させる
これが重要。
命名は「見た目」ではなく「役割」で決める
よくあるミスがこれ。
.red-text {
color: red;
}
これは最悪。
なぜか？
→ 色を変えた瞬間に名前が嘘になるから。
正しくはこう。
.error-text {
color: red;
}
役割ベースで命名することで、
変更に強くなる。
スコープを限定する
グローバルに効くCSSは、基本的に悪。
p {
margin-bottom: 16px;
}
これをやると、全ページに影響する。
代わりに、
.article p {
margin-bottom: 16px;
}
のように、作用範囲を閉じる
ファイル構造も設計の一部
CSSはコードだけじゃない。
構造も重要。
よくある良い構成はこう。
foundation（リセット・ベース）
layout（header, footerなど）
component（ボタン、カード）
project（ページ単位）
これを分ける理由は、
「どこを触ればいいか迷わせないため」
「再利用」より「破壊しない」を優先する
よくある勘違いが、
「共通化すればいい」
これは半分正解で、半分間違い。
共通化しすぎるとこうなる。
1つのクラスに依存が集まる
変更すると全体が壊れる
つまり、
再利用性よりも独立性を優先すべき
まとめ
保守しやすいCSS設計は、テクニックではなく考え方。
重要なのはこの3つ。
影響範囲を限定する
責務を分離する
依存を減らす
逆に言えば、
「なんとなく書く」だけでほぼ崩壊する。
CSSは自由度が高い分、設計しないと破綻する。
最初から完璧じゃなくていい。
ただし、「壊れにくい構造」を意識すること。
それだけで、後の自分が圧倒的に楽になる。
