CSS設計の代表的なルール大全-BEM・OOCSS・SMACSS・ITCSSを一気に理解する
CSSを書いていると、こんな悩みが出てきませんか？
- CSSがどんどん増えていく
- どこに書いたか分からない
- 修正すると他が崩れる
- 同じコードを何度も書いている
これはほとんどの場合、CSS設計がされていないことが原因です。
CSSは「書ける」だけではなく、
設計して書くことが重要な言語
です。
この記事では
- CSS設計とは何か
- 代表的な設計手法
- 実務での使い分け
- どれを選べばいいか
をまとめて解説します。
CSS設計とは？
CSS設計とは
CSSを整理して「壊れにくく・再利用しやすくするルール」
です。
設計がない場合👇
.header ul li a span {
color: red;
}設計がある場合👇
.nav-link {
color: red;
}この違いが
- 可読性
- 保守性
- 開発効率
に大きく影響します。
CSS設計の代表的な手法
CSS設計にはいくつか有名な手法があります。
① BEM（ベム）
最も有名な設計手法です。
構造
.block
.block__element
.block--modifier
例
<div class="card card--featured">
<h2 class="card__title"></h2>
</div>
特徴
- コンポーネント単位
- 名前で構造が分かる
- CSS衝突が少ない
向いている
- 中〜大規模サイト
- チーム開発
② OOCSS（オーオーシーエスエス）
Object Oriented CSS
考え方
構造と見た目を分離する
例
.box {
padding: 20px;
}.bg-blue {
background: blue;
}HTML
<div class="box bg-blue"></div>
特徴
- 再利用性が高い
- 組み合わせで作る
向いている
- UIパーツが多いサイト
③ SMACSS（スマックス）
Scalable and Modular Architecture for CSS
分類
Base
Layout
Module
State
Theme
例
/* Layout */
.l-header {}/* Module */
.card {}/* State */
.is-active {}
特徴
- CSSをカテゴリで整理
- 大規模向け
④ ITCSS（アイティーシーエスエス）
Inverted Triangle CSS
構造
Settings
Tools
Generic
Elements
Objects
Components
Utilities
特徴
- 上から下に詳細度が強くなる
- CSSの衝突を防ぐ
⑤ Utility CSS（ユーティリティ）
最近主流の考え方です。
例
<div class="p-4 bg-blue text-white"></div>
特徴
- クラスを組み合わせる
- Tailwindなど
向いている
- スピード重視
- 小〜中規模
それぞれの違い
| 手法 | 特徴 |
|---|---|
| BEM | コンポーネント設計 |
| OOCSS | 再利用重視 |
| SMACSS | 分類管理 |
| ITCSS | レイヤー構造 |
| Utility | 高速開発 |
実務でのおすすめ構成
結論から言うと
BEM + Utility + ITCSS的考え方
が最強です。
実務例
/* layout */
.l-header {}/* component */
.card {}
.card__title {}/* utility */
.mt-20 {}
.text-center {}
CSS設計の基本ルール
設計手法よりも大事なルールがあります。
① セレクタは浅くする
NG
.header ul li a span
OK
.nav-link
② classベースで書く
NG
div p span
OK
.card-text
③ 再利用できる設計
同じCSSを何度も書かない。
④ コンポーネント単位で考える
ボタン
カード
ナビ
モーダル
⑤ 状態を分離
is-active
is-open
よくある失敗
CSS地獄
#header .nav ul li a span
!important乱用
名前がバラバラ
card-title
card_title
cardTitle
設計しないまま書く
一番ダメ
どれを選べばいい？
初心者〜中級なら
まずBEM
理由
- シンプル
- 分かりやすい
- 実務で使われている
中級者以上
BEM + ITCSS
スピード重視
Utility CSS
まとめ
CSS設計とは
コードを壊れにくくするためのルール
です。
重要ポイント
① セレクタは浅く
② class中心
③ コンポーネント設計
④ 再利用
⑤ 命名ルール
最後に
CSSが上手い人は「設計している人」です。
BEMだけでなく、複数の設計手法を理解すると
- コードが整理される
- 開発が速くなる
- バグが減る
と一気にレベルが上がります。
