こんにちはー、フロントエンドエンジニアの匠ですー！
今回はGEAR8で導入しているFLOCSS（フロックス）というCSS設計方法をどのように利用しているのか紹介しますー！
FLOCSSってどんなものなかはこちらからどうぞ～！
命名規則
命名規則は基本的にはFLOCSSの公式の通りにしています。
MindBEMding
MindBEMdingを元にBlock、Element、Modifierに分けてクラス付けしています。
Modifierのみ手を加えており、公式ではクラス名に–をつけてmodifier名をつけています。
<button class="c-button c-button--secondary"></button>どの要素に対するmodifierかすぐわかるので確かに便利ではありますが同じクラスを2回書くためクラス名が非常に長くなります。また一つの要素に複数のクラスがつくことも少ないのでGEAR8では.–secondaryのようにmodifier名のみ記述するようにしています。
またactiveやopenなどの状態を表すmodifierは公式では.is-*プレフィックスを付与していますが、こちらも前述同様.–*のみでis-などのプレフィックスは付与していません。状態なのか、デザインの差なのかがクラス名ではわからなくなるデメリットもありますがクラス名で判断できるように状態を詳細に書くことである程度防止できるという判断でこの仕様にしています。
ファイル構成
FLOCSSで定義されているfoundation、layout、component、project、utility以外にjs、variableレイヤーを追加した6レイヤーで構成しています。
追加している独自のレイヤーに関してはこちらの記事で紹介しています。
ファイルのインポート
FLOCSSの参考を見るとstyle.scssに各ファイルを@useでインポートしているのをよく見ます。しかしファイル数が増えていくとフォルダが違うけど同じ名前のファイルが増えたり、量が多すぎて管理が大変になります。ですので各フォルダに_index.scssファイルを作成してindexファイルでは@forwardでフォルダのファイルを読み込み、style.scssでは@useでフォルダのみ指定して読み込むことでインポートの分割をしています。ただし処理が2回挟まったりするので好みなのかなと言うところではありますね。
気をつけるポイント
基本はprojectをベースに
FLOCSSで悩むポイントとしてはcomponentとprojectの使い分けですよね。
GEAR8では同じオブジェクトが3回以上登場した場合はcomponentに分けるようにしています。
構築前にデザインデータの一覧を確認してコンポーネントに分ける要素を事前に決めておくと構築途中にクラスを変更する手間が省けて効率の良い構築ができるのでオススメです。
Utilityは極力使用しない
Utilityは確かに便利なモジュールではありますが多用するとどのような役割のクラスなのかわからなくなってしまったりカオスなコードになってしまいます。極力微細なスタイルの変化（文字色など）に使用して、ほかはmodifierで対応するのがベストです。
JSモジュールではスタイルの設定は最低限にする
GEAR8独自で設定しているJSレイヤーではJavaScriptで操作する要素にはjs-*プレフィックスを指定しています。JSレイヤーを作成することで別クラスの要素でもJSの操作を共通化することができJSのコード量の縮小にも繋がります。しかし、このJSレイヤーはJSでの操作を主な役割としているのでJSレイヤーではなく対象のProjectレイヤーなどで状態管理含めスタイルの設定をするようにしています。
まとめ
今回はGEAR8がどのようにFLOCSSを利用しているか紹介しました。
FLOCSSはBEMやOOCSSなど複数の設計思想を取り入れた非常に優れた設計方法ですよね。
前回の記事といっしょに書いたので実質初めてのジャーナルですけど文章書くのはムズムズですね。
CSS設計は様々な種類があり迷ってしまうことばかりですが参考になればハッピーです。
