SMACSS（スマックス） すまっくす

---

SMACSSとは

SMACSS（Scalable and Modular Architecture for CSS：スケーラブルでモジュール化されたCSSアーキテクチャ）は、CSSを保守しやすく整理するための設計方法論（アーキテクチャガイド）です。カナダのフロントエンドエンジニア、Jonathan Snook（ジョナサン・スヌーク）氏が2011年に提唱しました。

SMACSSの核心は、すべてのCSSルールを5つのカテゴリに分類して書くことです。「どこに何を書くか」のルールを設けることで、プロジェクトが大きくなってもスタイルが混乱しにくくなります。フレームワークではなくガイドラインなので、既存のプロジェクトにも段階的に取り入れられるのが特徴です。

システム発注の現場では、フロントエンド開発の見積もりや品質評価の際に「CSS設計はどの手法を使うか」と問われることがあります。SMACSSを採用しているかどうかは、長期的な保守性やチームの生産性に直結するため、発注側も概念を知っておくと判断がしやすくなります。

---

SMACSSの5つのカテゴリ

SMACSSでは、CSSのルールを役割に応じて以下の5つに分類します。

カテゴリ	英名	役割	例
ベース	Base	タグそのもののデフォルトスタイル	body, a, h1 のリセット・基本設定
レイアウト	Layout	ページの大枠・骨格	ヘッダー、サイドバー、フッターの配置
モジュール	Module	再利用できる部品	カード、ボタン、ナビゲーション
ステート	State	状態変化のスタイル	.is-active, .is-hidden など
テーマ	Theme	見た目の色調・テーマ変更	ダークモード、カラースキン切り替え

覚え方：「ベレモスて」

5つのカテゴリの頭文字を並べると覚えやすいです。

ベ → ベース (Base)
レ → レイアウト (Layout)
モ → モジュール (Module)
ス → ステート (State)
て → テーマ (Theme)

「ベレモスて」と唱えれば5つ全部思い出せます！

クラス名のプレフィックス（接頭辞）ルール

SMACSSではカテゴリごとにクラス名の付け方にも規則があります。

/* Base: セレクタそのまま（クラスなし） */
body { margin: 0; }
a    { color: #0070f3; }

/* Layout: "l-" または "layout-" を付ける */
.l-header  { width: 100%; }
.l-sidebar { width: 240px; }

/* Module: プレフィックスなし（モジュール名をそのまま） */
.card       { border: 1px solid #ddd; }
.card-title { font-size: 1.2rem; }

/* State: "is-" を付ける */
.is-active  { background: #0070f3; }
.is-hidden  { display: none; }

/* Theme: "theme-" を付ける */
.theme-dark { background: #1a1a1a; color: #fff; }

---

歴史と背景

• 2011年：Jonathan Snookが自身のWebサイト向けにSMACSSの考え方をまとめ、電子書籍として公開
• 2012年頃：CSSが複雑化する大規模サービス（SNS・ECサイトなど）の増加にともない、CSS設計の必要性が広く認識され始める
• 2012〜2013年：同時期に登場した BEM（Block Element Modifier）や OOCSS（Object-Oriented CSS）とともに、CSS設計の三大手法として普及
• 2014〜2015年：日本のフロントエンドコミュニティでも積極的に紹介され、国内の大規模サイト制作で採用事例が増加
• 2016年以降：ReactやVueなどのコンポーネント指向フレームワークの台頭により、CSS Modules や CSS-in-JS といった新手法も登場。ただしSMACSSの考え方（役割の分離）は現代の設計にも受け継がれている

---

他のCSS設計手法との比較

SMACSSと並ぶCSS設計手法がいくつかあります。それぞれの特徴を理解しておくと、開発会社への発注・提案評価に役立ちます。

SMACSSとBEMの実際の書き方比較

同じ「アクティブなナビゲーションリンク」をそれぞれの手法で書くとこうなります。

/* SMACSS の書き方 */
/* モジュール: ナビゲーション */
.nav-item { display: inline-block; padding: 8px 16px; }
/* ステート: アクティブ状態 */
.nav-item.is-active { color: #0070f3; border-bottom: 2px solid #0070f3; }

/* BEM の書き方 */
/* Block: nav / Element: item / Modifier: active */
.nav__item           { display: inline-block; padding: 8px 16px; }
.nav__item--active   { color: #0070f3; border-bottom: 2px solid #0070f3; }

SMACSSはis-というステートクラスで状態を独立させているのが特徴です。JavaScriptで動的にクラスを付け外しする際にも「is-activeを付ける・外す」という一貫したルールで扱えます。

---

関連用語

• BEM — Block・Element・Modifierの命名規則によるCSS設計手法
• OOCSS — オブジェクト指向の考え方をCSSに適用した設計方法論
• CSS Modules — コンポーネント単位でCSSをスコープ化する仕組み
• Sass（SCSS） — CSSを拡張する変数・ネスト・ミックスインなどを提供するプリプロセッサ
• Tailwind CSS — ユーティリティクラスを組み合わせてスタイリングするCSSフレームワーク
• デザインシステム — UIコンポーネントとスタイルガイドを体系化した設計資産
• レスポンシブデザイン — 画面サイズに応じてレイアウトを変化させるWebデザイン手法