【CSS】「OOCSS」、「SMACSS」について

CSSのプロパティは、基本的にグローバルスコープなので他に汚染される可能性があります。なので、様々な原則を用いて保守性の高いCSSを記述するためのガイドラインが世の中にあります。

OOCSS(オブジェクト指向CSS)

スコープがグローバルになるためコンポーネント設計が難しいCSSに対してオブジェクト指向プログラミング の概念を取り入れたものです。

OOCSSの原則

分離が、再利用可能なコンポーネント（HTML、CSS、JavaScriptのセット）を設計する上で重要です。

構造と見た目の分離

コンポーネントの基本構造と、具体的なルール機能を分離することです。

例えば、アラートの部品があった場合に、warning、errorや、infoなどがありますが、基本的にどの骨格も変わりません。ただ、背景や文字色などは変えることが多いので、それらのCSSセレクタを分離します。

「class=”alert-info”」としているのを「class=”alert info”」などと分離します。

また、「alert」と「alert-info」などのような命名にすると良いです。なぜなら、「info」のようになっていると全く別の用途のCSSに汚染される可能性があるためです。

コンテナーとコンテンツを分離

場所に依存しないセレクタを記述する。例えば、ヘッダーとフッターにロゴのcssスタイルが必要になった場合は、それぞれ分離してスタイルを記述するのではなく、.logoとするなど共通のスタイルとして記述するようにします。

SMACSS（スマックス）

ライブラリやフレームワークがあるというよりはCSSのベストプラクティス的なものです。OOCSSの思想がベースになっています。

カテゴライズ

パターンを抽出しやすくするためのカテゴライズを用意しています。

Base

ブラウザやプロジェクトにおける各要素のデフォルトスタイル。具体例をあげれば、reset.cssや、normalize.cssなどが該当します。

Layout

ヘッダーや、フッター、コンテンツエリア、サイドバーという構成の大枠。この粒度であればページ内に一つしか存在しないことがほぼ保証されるのでIDセレクタは使っても良いでしょう。

Module

Layoutのパターンを除いてページを構成するほぼ全てがこのカテゴリーに属します。ボタン、見出しなど。「m-*」や「mod-*」などの命名をしたりします。

State

JavaScriptによる制御などによって切り替わるような状態を表すルールを記述します。例：.is-hiddenや、.is-error、.is-activeなど。

基本的に状態を表すので、「is-*」という命名規則を使ったりします。

Theme

テーマを切り替えたりするような機能が求められるCSSの時に考慮する。

Stateよりも大きい粒度のスタイルになります。