Skip to content

FLOCSS実践編

実際に FLOCSS を使ったサイト構築をする機会がありましたので、その際に使ったルールと、その反省点をまとめます。

以前書いた FLOCSS の記事はこちらです:ドキュメントを読んで考えるFLOCSSのメリット

FLOCSS基本ルールの取捨選択

まずはドキュメントの内容を禁止、非推奨、許容、推奨の4種類に分類し、それぞれ採用するかどうかを判断していきました。

禁止

  • 【採用】レイヤーの順序を前後させる
  • 【採用】レイヤー内のモジュール間のカスケーディング
  • 【採用】モジュール間の Extend
  • 【採用】is- プレフィックスをもつクラスそのものにルールを持たせる

非推奨

  • (非採用)Layout レイヤー以外の要素で ID セレクタを使う

許容

  • 【採用】レイヤー間のモジュール間のカスケーディング
  • 【採用】モジュール内のカスケーディング
  • 【採用】モジュール内の Extend
  • 【採用】is- プレフィックスをもつクラスを使う
  • 【採用】隣接セレクタ、疑似クラスを使う

推奨

  • (非採用)Layout レイヤーの要素で ID セレクタを使う
  • 【採用】mixin や function は、Foundation レイヤーに含める
  • 【採用】clearfix テクニックのためのルールセットが定義されているヘルパークラスは、Utility レイヤーに含める
  • 【採用】MindBEMding に則った命名を行う
  • 【採用】Object にプレフィックスをつける
  • 【採用】モジュール単位でファイルを分割する

まとめ

FLOCSS のドキュメントに書かれている内容については、基本的には全面的に採用することにしました。

また、命名は BEM の公式の方式に則ることとしました。

FLOCSSアレンジルールを作成

ディレクトリ構成

Foundation をさらに分割し、Sass の変数定義用のディレクトリを作成しています。

また、Component も Container と Content というレイヤーに分割しています。

ディレクトリの説明

Setting

文字サイズ、余白、色などの変数、mixin、function を定義します。

Core

リセットCSS、外部ライブラリCSSを含む、フォントや box-sizing など、サイトの基本的なスタイルを定義します。

Layout

ヘッダー、フッターなど、レイアウト部のスタイルを定義します。

Layout には、ID ではなくクラスセレクタを使い、プレフィックス l- をつけることとします。

Container

FLOCSS の Component レイヤーを、Container と Content に分割します。

Container は、グリッドやパネルといった「囲む」ためのコンポーネントであり、fllex, position, float, margin など、周辺に影響するスタイルを持ちます。

なお、margin や border などに相殺や重複が発生する場合は、上、左につけることで統一します。

Container には、プレフィックス cr- をつけることとします。

Content

Content は、ボタンや見出しといったコンポーネントを指します。

周辺の要素に影響を与えるようなスタイルはこれらのコンポーネントには持たせないようにします。

ただし例外として、見出しに margin を持たせることは許容します。

Content には、プレフィックス ct- をつけることとします。

Project

Container, Content を組み合わせたもののルールを定義します。

主に Container で対応しきれない配置、余白設定などの設定に利用します。

また、BEM の Mix などもここに定義することとします。

※Mix というのは、BEM のテクニックの1種です。以前書いたこちらの記事(BEM再入門)をご覧ください。

Utility

通常のヘルパークラスに加え、異なる Container 同士の隣接セレクタによる margin 調整などのルールもここに含めます。

ただし、ヘルパークラスよりも Project による上書きを推奨します。

また上書きの際には、本来持つ特徴を削除する「打消し」が発生しないような実装を推奨します。

【×】

【○】

まとめ

  • Layout には、ID ではなくクラスセレクタを使い、プレフィックス l- をつける
    • CSS設計上はメリット、デメリットともにありませんでした。
  • Component レイヤーを、Container と Content に分割
    • 目的通り、margin 設計を把握しやすくなりました。
  • margin や border などに相殺や重複が発生する場合は、上、左につけることで統一
    • 隣接セレクタを使った margin 設計が可能になるのでおすすめです。
  • 周辺の要素に影響を与えるようなスタイルは Content レイヤーのコンポーネントには持たせない
    • margin 用の Container で囲む必要が出てくるため、HTML が肥大化した印象がありました。ただ、設計が把握しやすいので、運用効率は向上します。
  • 異なる Container 同士の隣接セレクタによる margin 調整などのルールは Utility レイヤーに定義する
    • そのコンポーネントに定義されている margin が別ファイルに記述されてしまうため、把握に手間取ることがありました。margin は対象コンポーネントと同じファイルに記述したほうが良かったかもしれません。

Comments are closed.