SMACSS(スマックス)はOOCSSのコンセプトをベースにできた、フロントエンドに関するガイドラインです。
SMACSSのポイントはパターンを抽出しやすくするためにカテゴライズされていることです。
SMACSSで提案しているカテゴリは
・BASE
・Layout
・Module
・State
・Theme
・BASEは各要素のデフォルトのスタイルを定義します。例えばreset.cssなど各要素のスタイルをリセットするものなどBASEカテゴリに属します。
・LayoutはIDを用いて定義されるヘッダーやコンテンツ、サイドエリアやフッターなどといった構成の大枠へのルールです。
・Moduleではページを構成できるオブジェクトのカテゴリです。それはボタンや見出しなど再利用可能なものを指します。
・Stateは、状態を表すルールを指します。よく使われるものでいえば
.is-hidden{/*.is-hiddenといった要素を隠すためのdisplay:none;を適用させるためのクラスを作成*/ display:none; }
・Themeはテーマを切り替えられるような機能が求められるようなcssの時に考慮されるカテゴリです。
よくつかわ