こんにちはー、フロントエンドエンジニアの匠ですー！
今回はGEAR8で導入しているFLOCSS（フロックス）というCSS設計について紹介します。
FLOCSSは知ってるからどう運用してるの？って方はこちらからどうぞ～！
FLOCSS（フロックス）の概要
FLOCSS（フロックス）は谷拓樹氏が提唱したCSS設計手法です。日本人が提唱しており公式のGithubも日本語で書かれており、関連記事も多いので導入のハードルは低いですね。
後述しますが、レイヤーごとにクラス名に対してプレフィックスをつけることで役割が明確になり、運用のし易い設計となっています。
FLOCSSの構造
FLOCSSは3つのレイヤーとObjectレイヤー内の子レイヤー3つで構成されています。
- Foundation
- Layout
- Object
- Component
- Project
- Utility
Foundation（ファンデーション）レイヤー
Foundationレイヤーでは名前の通り、スタイルのベースとなる下地の設定（ルートのフォントサイズなど）やreset周りの設定を行います。
Layout（レイアウト）レイヤー
Layoutレイヤーではヘッダーやフッターなどのサイト内で共通のブロックスタイルを設定します。
Layoutレイヤーのクラスにはl-*プレフィックス（l-headerなど）を設定します。
Object（オブジェクト）レイヤー
Objectレイヤーには3つの子レイヤーが存在します。
Component（コンポーネント）レイヤー
Componentレイヤーではボタンや見出しなどの再利用可能な小さいモジュールのスタイルを設定します。
Componentレイヤーのクラスにはc-*プレフィックス（c-btnなど）を設定します。
弊社ではコンポーネントに分ける基準としては3度目の法則に基づいています。3回同じパーツが出現したらコンポーネントレイヤーに分けることで無駄なファイルを減らせて運用が楽になります。
またコンポーネントは最低限の機能として定義するべきなので、ネストは3回くらいまでに留めたほうが良いです。それ以上ネストする場合はコンポーネントではなくプロジェクトとして定義しましょう。
Project（プロジェクト）レイヤー
Projectレイヤではコンポーネントの集まりや固有のパターンのスタイルを設定します。
Projectレイヤーのクラスにはp-*プレフィックス（p-mvなど）を設定します。
固有のパターンという言葉では想像しづらいですがメインビジュアルや記事一覧、スライダーなどのコンテンツ全般を定義するので一番利用するものとなっています。
Utility （ユーティリティ）レイヤー
Utilityレイヤーではモディファイアでは対応できないものなどの細かいスタイル設定のためのレイヤーです。
Utilityレイヤーではu-*プレフィックス（u-colorなど）を設定します。
ユーティリティレイヤーはプロジェクトレイヤーなどで不要なモディファイアの設定を防いでくれます。他にもu-mt–10（margin-top: 10px;）で隣接するブロックの間隔を空けるのに利用でき、大変便利なレイヤーです。
しかし、ユーティリティレイヤーは便利な分増やそうと思えばいくらでも増えてしまい、結果として不要なファイルの増加につながってしまいます。どこまでユーティリティクラスで対応するかは設計のときに気をつけるポイントです。
追加のGEAR8オリジナルレイヤーについて
GEAR8では前述したFLOCSSの構造に一部手を加えて運用しています。
Variableレイヤー
Variable（ヴァリアブル）レイヤーはFoundationレイヤーなどの階層に追加しています。
Sassでは変数やMixinを利用することで効率的にCSSを書くことができます。この変数などを定義するのがVariableレイヤーになっています。
Dart Sassから変数などを利用する際に@useを利用して明示的に変数を読み込む必要がありました。そのため変数をまとめるレイヤーが必要となりVariableレイヤーを作成してこのレイヤー内に変数などを定義するScssファイルを設置しています。
JSレイヤー
Objectレイヤーの子レイヤーにJS（ジェーエス）レイヤーを追加しています。
JSレイヤーではJSでの制御が必要なクラスにjs-*プレフィックス（js-tabなど）を与えています。また、このレイヤーでのスタイル設定は最低限にして同じ要素につけるクラスでスタイル設定をしています。
例えばタブ切り替えを実装する際にタブ切り替えのボタンにjs-tab__trigger、切り替え対象にjs-tab__targetといったクラスを設定します。JSではこのjs-tab__triggerやjs_tab__targetクラスに対して制御を行っていると別スタイルのタブにも同様のクラスでの制御が可能になります。また、前述した通りスタイル設定は基本行わないので別クラスの要素に対してスタイルの干渉も起こりづらくなります。
このようにJSレイヤーを追加することでJSの再利用ができ、コードの記述量を減らす事ができます。
