概要
「Foundation Layout Object CSS」の頭文字をとっている。OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案。
FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして「Object」の中の「Component」「Project」「Utility」から成り立っている。
【参考】
https://haniwaman.com/template/
https://yumegori.com/flocss
クラス名のルール
FLOCSSのネーミングルールは、BEMがベースとなっている。
BEMとは異なるFLOCSS特有のルールとしては、プレフィックス（接頭辞）をつけるという点になる。「Component」には.c-、「Project」には.p-、「Utility」には.u-をそれぞれ付与する。
Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというようにすることもできる。
Foundation
要素の初期化やmixinなどのベースを設定。リセットCSSなど。サイト全体のデフォルトスタイルを管理。
- animation：keyframesでアニメーションのパターンを指定
- attr：独自に作成したHTML属性に関するCSSを指定
- reset：ブラウザのデフォルトのスタイルをリセットするCSSを定義
- base：サイトを構成する上で、デザインの基本の下地、土台となるスタイルを定義（※基本的にタグ自体にスタイルを定義すること。クラスなしの状態でも最低限の表示になることを心がける）
- mixin：SASSで使いまわす関数を定義
- variable：サイト全体で使える変数を定義
Layout
各ページを構成するサイト全体で共通したエリアを管理。ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。
ヘッダーやフッターの中身はp-で定義する。
- .l-header：ヘッダー部分のレイアウト
- .l-header–fixed：ヘッダー部分をposition:fixedで固定
- .l-footer：フッター部分のレイアウト
- .l-inner：サイトのインナー部分のレイアウト など
Component
再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツ。（ボタンなど）
marginなど余白は定義しない。あくまでパーツとして扱う。
Project
サイト固有のまとまりを定義してパターン化するパーツ。案件に応じて追加していくパーツ。
Utility
ちょっとした調整のために使われる。余白の調整や非表示など。
すべての余白marginをUtilityクラスでつけることはしない。あくまで補助としての役割であること。
Theme
テーマによる色の切り替えなど、ページ単位の色違いとか。
External
外部リソースで読み込んだCSSを上書きするところ。
jQuery、IntersectionObserver、Lightbox、stickyfill、Swiper
など
ProjectとComponent
Componentは案件を超えて使い回せるもの。Projectはその案件だけで使えるもの。という認識。
ProjectからComponentを上書きすることはFLOCSSでは許可されている。
【参考】
https://www.ozlink.co.jp/lab/1050/
読み込む順番
正しい順番で読み込むことで破綻しにくいCSSとなる。
@use “foundation/”;
@use “layout/”;
@use “component/”;
@use “project/”;
@use “utility/**”;
FLOCSSをDart Sassで構成
@importを使ったファイルの読み込みが非推奨になるため、@useと@forwardを使ったDart Sassに切り替える必要がある。
【参考】
https://yumegori.com/dart-sass-method
- @importは遅くとも2021年10月1日には非推奨
- @importは遅くとも2022年10月1日にサポート終了
