【CSS】 忙しい人のためのSMACS

SMACSS (Scalable and Modular Architecture for CSS; スマックス) の概要についてご紹介致します。

---

---

SMACSS概要

CSSを5つにカテゴライズした構造

カテゴリ	概要
Base	Reset CSSなどのスタイルの基本
Layout	ページのセクション（header, footer, content）
Module	再利用可能なモジュールパーツ
State	Layout, Moduleの特定状態下でのスタイル
Theme	Layout, Module, Stateの見え方 *1

各カテゴリの詳細

対象セレクタ

カテゴリ	対象セレクタ
Base	Element selector ( div , a ) Descendant selector ( ul li ) Child selector ( ul>li ) Pseudo-classes( button:hover )
Layout	ID Class
Module	Class
State	Class
Theme	Class

記法

カテゴリ	記法
Base	-
Layout	ID: 的確な命名 *2 、Class: プレフィックス l-
Module	-
State	Module名を含めることを推奨
Theme	プレフィックス theme- *3

例

カテゴリ	例
Base	div { margin: 0; }
Layout	#header { margin: 0; } .l-footer { margin: 0; }
Module	.module { font-size: 1rem; } .module-submodule { font-size: 1.2rem; } .module.module-submodule { font-size: 1.4rem; }
State	.is-module-active { color: #f00; }
Theme	.theme-module { color: #777; }

!important の利用可否

カテゴリ	ファイル
Base	不可
Layout	非推奨
Module	非推奨
State	使用可
Theme	非推奨

SCSSの利用時

ファイル構成

カテゴリ	ファイル
Base	base.scss*4
Layout	layout/xxx.scss*5
Module	module/xxx.scss*6
State	states.scss*7
Theme	-

+-layout/
| +-grid.scss
| +-...
+-module/
| +-callout.scss
| +-btn.scss
| +-...
+-base.scss
+-states.scss
+-site-settings.scss
+-mixins.scss

基本ファイルでの @import 内容

@import
  "site-settings",
  "mixins",
  "base",
  "states",
  "layout/grid",
  "module/callout";

---

まとめ

• SMACSS は CSS を5つにカテゴライズした構造
  • Base, Layout, Module, State, Theme

---

最後に

忙しい人向けに、ざっくりとSMACSSについてまとめました。 細かい部分については注記を参照して下さい。

SMACSSは、2011年にJonathan Snookさんによって提唱されたArchitectureで、OOCSS (Object Oriented) や CSS Wrokflow などの影響を受けています。 また、BEMやFLOCSS、ECSSなどとの比較にも出されることが多く、おさえておいた方が良いアーキテクチャではあります。

公式ドキュメントには、カテゴリ毎の注意点やSCSSでの注意点、どうしてもBaseで避けられない事象についても記載があるため、 公式ドキュメントを読んでいただいた後に再度戻ってきていただくと、思い出せる手助けになると思います。

---

References

• 公式ドキュメント
  • smacss.com
• 公式ドキュメント (日本語版)
  • smacss.com

---

*1:Themeカテゴリはユーザーによって表示変更をする場合などに利用しますが、基本的には1つの表示形式になるため殆どの場合LayoutやModule、Stateで完結します。

*2:LayoutのプレフィックスをIDでも利用しても良いですが、ID利用が明確であるため必要性は薄いです。

*3:Themeのプレフィックスは複数の複雑な命名の場合のみ必要ですが、複雑でなければ不要です。

*4:SCSSでBaseを記述する場合、全て1つのファイルにする必要があります。

*5:SCSSでLayoutを記述する場合、1ファイルのみか、主なレイアウト毎にファイルを作成します。

*6:SCSSでModuleを記述する場合、各々のModuleでファイルを作成します。

*7:SCSSでStateを記述する場合、グローバルで利用するStateは専用のファイルに記述します。また、LayoutやModuleに関連するメディアクエリを含む場合は、Moduleのファイルに記述します。