CSSの設計手法『SMACSS』の使い方

CSS設計手法のSMACSSについて調べてみたのでメモ。

SMACSSについて

SMACSS(スマックス)はCSSの設計手法の一つで、CSSのルールを5つのカテゴリに分類するのが特徴です。

• Base
• Layout
• Module
• State
• Theme

それぞれのカテゴリの内容についてみてみます。
　

Base

サイト全体の各要素のデフォルトのスタイルを指定するもので、reset.cssやnormalize.cssなどが該当します。
このカテゴリはサイト全体に影響するので、制作開始後は基本的に書き換えないようにします。
　

Layout

ヘッダーやフッター、サイドバーなどのレイアウトパーツを指定するもので、プレフィックスで「l-」をつけるようにします。

.l-header {}
.l-footer {}
.l-main {}
.l-sub {}

他にも、グリッドなどのコンテンツ内で再利用可能なレイアウトも含めます。

.l-grid {}
.l-grid-item {}

Module

見出しやボタン、アイコンなど再利用可能なパーツを指定します。
親のモジュールがある場合、親のモジュール名をプレフィックスとしてつけるようにします。

<div class="box">
	<h2 class="box-title">見出し</h2>
	<p class="box-sentence">本文のテキストと<a href="#">リンク</a>です。</p>
</div>

.box {}
.box-title {}
.box-sentence {}
.box-sentence a {}

全てのモジュールに必ずclassをつける必要はありませんが、再利用するときにタグが変更される可能性はないかの注意が必要です。
例えば上記の場合、.box-sentence内のaタグは再利用時にタグが変わることはなさそうですが、.box-titleは再利用時にh3やpタグに変更される可能性があるため、classをつけたほうがよいです。
　

State

一時的な表示・非表示や選択状態など、要素の状態の変化を指定するもので、プレフィックスで「is-」をつけるようにします。
classの付与はJavaScriptで行います。

.is-menu-hidden {}
.is-menu-disable {}
.is-tab-active {}

プレフィックスの後に使用するモジュール名を付けておくと、class名が被らなくてよさそうです。
　

Theme

テーマの異なるパーツを指定するもので、プレフィックスで「theme-」をつけるようにします。
あまり使う機会はなさそうな気がしますが、例えばブログ系のサイトでユーザーがテーマを選択できる場合などで使います。

.theme-cute {
	background: url(./img/theme/cute_bg.png) repeat;
}
.theme-cute .box {
	color: #E74C3C;
}

【参考サイト】

• SMACSSによるCSS設計 – Qiita
• SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid
• SMACSSを利用したCSS設計について – 03LOG