SMACSS とは何ぞや
Scalable and Modular Architecture for CSS
上記の略称を SMACSS と呼称する。
訳すならば「拡張性が高く、モジュール化された CSS 構造」といったところか。
目的に応じて CSS ルールを記述するファイル(モジュール)を使い分け、
保守性を高めようとする CSS 設計の考え方。
SMACSS では CSS ファイルを以下の単位で分割して管理する。
Base ルール
Web ページの土台となるルール群を記述する。
Class セレクタや ID セレクタを一切含まず、
個々の要素へ適用するデフォルト設定を記述する。
Base ルールとしてよく使用される CSS ルールセットを下記に例示する。
-
normalize.css
HTML 要素のブラウザ間のデフォルトスタイルの差異を吸収し、
標準化しようと考える CSS ルールセット。 -
Reset CSS
HTML 要素のデフォルトスタイルを打ち消すことで
ブラウザ間のデフォルトスタイルの差異を
標準化しようと考える CSS ルールセット。
より詳しく知りたい人
Base Rules を参照。
Layout ルール
レイアウトに関するルールを記述する。
ページ全体のレイアウトに関するルールか、
個別のコンポーネント内のレイアウトに関するルールかは問わない。
より詳しく知りたい人
Layout Rules を参照。
Module ルール
BEM のBlock と同様の考え方。
より詳しく知りたい人
Module Rules を参照。
State ルール
BEM の Modifier と同様の考え方。
より詳しく知りたい人
State Rules を参照。
Theme ルール
ページ全体の配色やレイアウトをガラッと変化させたい場合に使用する。
Github を例に挙げると、画面を Day theme で表示させるか
Night theme で表示させるか選択できるようになっている。
より詳しく知りたい人
Theme Rules を参照。