More than 5 years have passed since last update.

FLOCSSメモ

Last updated at 2018-03-12Posted at 2018-01-31

レイヤー

下記のレイヤーから構成される。

reset.css、base.cssなどのブラウザのデフォルトスタイル（タグ要素への指定）を定義。
ページ全体の背景やタイポグラフィなどが該当する。

ページを構成するヘッダー、フッター、サイドバー、メインコンテンツといった広域の共通部品の定義。

ページ単位で唯一の部品となるためIDセレクタによる指定を行っても良い。

プロダクト内において繰り返されるビジュアルパターンが全て該当する。
(Faundatino, Layoutを除く)

Objectレイヤーは更に下記3レイヤーに分類される。

再利用出来るパターンとして、小さな単位のモジュールを定義。

出来る限り最初減の機能を持ったモジュールとして定義されるべき。
（汎化）

プロジェクト固有のパターンであり、いくつかのコンポーネントとそれに該当しない要素によって構成される。

ComponentとProjectレイヤーの組み合わせで解決する事が難しい・適切ではない場合やわずかなスタイルの調整を行うためのヘルパー。

基本的にはBEMシステムのシンタックス Block, Element, Modifier に分類して構成される。

Modifierの派生パターンとして、JSで走査されるような状態を表すものについてはis-プレフィックスを付与する事も可能。

<button class="c-button is-active">

なお、is-activeのようなステートクラスには直接スタイルを充てず、.c-button.is-activeのように範囲を限定する事。
（他のModifierのスタイルを汚染しない）

レイヤーの順序を前後させてはならない

原則として、モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングを禁止する。

特に同一レイヤーにおけるモジュール間のカスケーディングは好ましくない。

可能な限りモジュール間に依存性が存在しない構成にするべきである。

例外として、レイヤー間におけるカスケーディングは許容される。
（プロジェクトはいくつかのコンポーネントと固有のスタイルを持つ）

<div class="p-profile c-media">
	<img class="c-media__image">
	<div class="-media__body"></div>
</div>

ただし、このような場合においてもComponentレイヤーのModifier拡張、ProjectレイヤーのElement拡張によって、解決出来る場合がある。
(スタイルの上書きを行う場合はコメントするのが好ましい)

<div class="p-profile c-media">
	<img class="p-profile__avatar c-media__image">
	<div class="-media__body"></div>
</div>

<div class="p-profile c-media">
	<img class="c-media__image c-media__image-reverse">
	<div class="-media__body"></div>
</div>

なお、出来る限り前者（Componentレイヤーを太らせる方向）を採用して、後者（Projectレイヤーを太らせる方向）を採用する場合は下記のようなルールを設ける。

モジュール内で完結するカスケーディング、複数のセレクタを用いる事は許容される。

<ul class="c-tabs">
	<li class="c-tab">
		<a class="c-tab__target"></a>

イベントなどでサイト全体のデザインが大きく変更される場合は、 Theme/Compositionなどのレイヤーを設けても良いかも
あまりにも各レイヤーのパターンが多い場合やカンプが不揃いな場合はヘルパークラスを多用してプロトタイプ的なものを作り、後からパターンを見つけてモジュール化していく方が良さそう。（考える > 作業になりそう）
他のCSS設計にも通じると思うが、レイヤー/モジュールの切り分け以上に大変で重要な作業はカンプ時点でのデザインのパターン化を協働する作業だと思った。　　
(コーダーとデザイナーが分業の場合)