【CSS】「MCSS」について

MCSSとは？

OOCSSとBEMのコンセプトをもとに作られた新たなコンセプトです。「Multilayer CSS」の略です。

マルチレイヤーCSS

複数のレイヤー構成をもとにしてCSSを設計するアプローチをとっています。ルールに従えば、SMACSSなどと同じように特別なツールなどを用いることなく拡張性が高いCSSを記述することができるようになります。

Foundation（最下層）

SMACSSでいうところのBaseと同じと考えて良い。プロジェクトの土台としてreset.cssや、normalize.cssを用いた各要素の初期化を行う。

Base（二層）

SMACSSでいうところのModuleカテゴリに近いかもしれない。プロジェクトの各所で再利用できて抽象的である要素が該当する。他のプロジェクトでも再利用できるレベルで抽象化されている要素。例えば、ボタン、フォーム、ナビゲーションなど。

世の中でよく使われているBootstrapや、ReactのMaterial-UIなどもこの中に入ると考えて差し障りない。

例

• ボタン
• フォーム
• ナビゲーション

特徴

BaseレイヤーコンポーネントからBaseレイヤーコンポーネントは上書きできるが、BaseレイヤーコンポーネントからProjectレイヤーコンポーネントは上書きできません。

Project（三層）

Baseレイヤーコンポーネントより具体的なページ構成要素を含む。

例

• 登録フォーム
• ログインエリアのブロック

特徴

ProjectレイヤーコンポーネントからBaseレイヤーコンポーネントやProjectレイヤーコンポーネントは上書きできる。

Cosmetic（最上位層）

下層のレイヤーには含まれないようなスタイルが含まれている。

例

• リンクカラー
• 少数のプロパティで構成されるCSS(.margin-fLなど)
• グローバルなModifier

ユースケース

ほとんど他の部品と同じだが、このコンポーネントだけイレギュラーに画像が差し込まれるので、少しだけ余白を開けたい場合など。

特徴

Cosmeticレイヤー自身を含め、全てのレイヤーから上書きできない。（ただし、Contextレイヤーを除く）

Context（例外の層）

特定のブラウザや、デバイス向けや、ログイン中など特定条件下にある場合などに例外スタイルです。