FLOCSSメモ

レイヤー

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

• Foundation - reset/normalize/base...
• Layout - header/main/sideber/footer...
• Object
  • Component - grid/button/form/media...
  • Project - articles/ranking/promo...
  • Utility - clearfix/display/margin...

1. Foundation

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

2. Layout

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

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

3. Object

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

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

3-1. Component

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

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

3-2. Project

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

3-3. Utility

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

命名規則

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

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

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

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

オブジェクトのプレフィックス

• Component - .c-*
• Project - .p-*
• Utility - .u-*

ファイル・ディレクトリ構成

• foundation
  • _reset.scss
  • _base.scss
• layout
  • _main.scss
  • _header.scss
  • _footer.scss
  • _sidebar.scss
• Object
  • component
    • _button.scss
    • _dialog.scss
    • _grid.scss
    • _media.scss
  • project
    • _articles.scss
    • _comments.scss
    • _gallery.scss
    • _profile.scss
  • utility
    • _align.scss
    • _clearfix.scss
    • _margin.scss
    • _position.scss
    • _size.scss
    • _text.scss

カスケーディングと詳細度

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

レイヤー、モジュールのカスケーディング

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

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

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

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

<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レイヤーを太らせる方向）を採用する場合は下記のようなルールを設ける。
- 子供セレクタなどによって出来るだけ適用範囲を限定する
- 他レイヤーのモジュールを親セレクタに持つのは一つだけとする
.p-profile > .c-media__image

モジュール内のカスケーディング

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

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

備考

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