CSS設計手法の『MCSS』の使い方

CSS設計手法「MCSS」について調べてみたのでメモ。

MCSSについて

MCSSはCSSの設計手法の一つで、モジュールをレイヤー毎に分離させているのが特徴です。
以下の5つのレイヤー構成に分離させます。

• Foundation
• Base
• Project
• Cosmetic
• Context

各レイヤーを読み込む順番は決まっていて、Foundation > Base > Project > Cosmetic の順で、Contextは必要に応じて各レイヤー内に記述します。
　

基本原則

モジュールに関連するスタイルは、該当するレイヤー内でまとめて記述します。
モジュールに属する要素は、親のモジュール名をプレフィックスとしてつけて、アンダーライン(_)一つで繋ぐようにします。
バリエーション違いの要素の場合、アンダーバー2つ(__)から始まる名前にして、「.モジュールクラス名.__modifier」のような形でCSSを指定します。

HTML

<div class="module">
	<div class="module_list __modifier"></div>
</div>

CSS

.module {}
.module_list {}
.module_list.__modifier {}

Contextだけ例外で、該当するモジュールが記述されているレイヤー内で記述されます。

CSS

.module {}
.ie9 .module {}
@media screen and (max-width: 980px) {
	.module {}
}

それぞれのレイヤーの内容についてみてみます。
　

Foundation

Foundationにはreset.cssやnormalize.cssなどのような、サイト全体で適用される各要素のリセットや変更を行います。
CSS内で最初に読み込まれる必要があります。
　

Base

Baseにはボタンやアイコン、ナビゲーションのような再利用可能で抽象的なモジュールを指定します。
Bootstrapなどのフレームワークの一部分もここに分類されます。

Baseモジュールは他のBaseモジュールやProjectモジュールから上書きされる可能性があります。

Base

.input-field {}
.input-field_text {}

Project

.project-module {}
.project-module .input-field_text {}

以下のように、BaseモジュールからProjectモジュールを変更することは禁止です。

Base

.input-field .project-module {}

Project

ProjectにはBaseより具体的な、ページを構成するプロジェクトモジュールを指定します。

Projectモジュール内でBaseモジュールを利用する場合、HTMLにもう1つCSSクラスを割り当てる必要があります。

HTML

<div class="project-module input-field">
	<div class="input-field_key">お名前:</div>
	<div class="input-field_text">
		<input type="text" name="name">
	</div>
</div>

Base

.input-field {}
.input-field_key {}
.input-field_text {}

Project

.project-module {}
.project-module .input-field_text {}

Projectモジュールは他のProjectモジュールから上書きされる可能性があります。

.project-module .other-project-module {}

Cosmetic

Cosmeticにはリンクカラーやマージン調整のような少量のスタイルなどを指定します。

.color_red {}
.font-size_XL {}
.margin-t_L{}

一時的にバナーやメッセージを追加したい場合など、再利用しなさそうなものを調整する場合に便利ですが、ブロックで最大3つまで使用できるルールになっています。

HTML

<div class="font-size_XL margin-t_L color_red">メッセージ！！</div>

CosmeticモジュールはContext以外からは上書きできません。

.project-module .font-size_XL {}

Context

Contextには特定のブラウザやデバイスの対応、ログイン中の場合、メディアクエリでの特定の条件の場合など、例外的なスタイルを指定します。
Contextは他のレイヤーと違い、Contextとして固まったレイヤーはなく、使用する各モジュール内で記述されます。

CSS

.project-module {}
.ie9 .project-module {}
@media screen and (max-width: 980px) {
	.project-module {}
}

【参考サイト】

• MCSS