FLOCSS（Flexible, Look and feel Oriented, CSS architecture）は、CSSの設計手法の一つで、大規模で複雑なウェブサイトやアプリケーションのスタイルシートの保守性と拡張性を向上させることを目的としています。他のCSS設計手法（例えばBEMやSMACSS）の概念も参考に取り入れています。構造は下記のように分けられます。
①Foundation（基盤）
リセットやノーマライズスタイル、タイポグラフィなど、プロジェクト全体の基盤となるスイルを定義します。
②Layout（レイアウト）
ウェブサイトやアプリケーションの大枠となるレイアウトに関連するスタイルを定義します。 例えば、ヘッダー、フッター、カラムのレイアウトなどが含まれます。
③Object（オブジェクト）
再利用可能なUIのパターンを定義します。オブジェクトは更に以下のサブカテゴリに分けられます。
・Component（コンポーネント） ボタンやフォームなど、再利用可能なUIの部品。
・Project（プロジェクト） 特定のプロジェクトやウェブサイトに特有のスタイル。
・Utility（ユーティリティ） スペース、テキストのアラインメントなど、一つの目的を持つ単
純なヘルパークラス。
クラスの基本的な考え方はBEMを参考にしていますが、頭にプレフィックスをつけることを推奨しています。
Foundationであれば、.f-*
Layoutであれば、.l-*
Componentであれば、.c-*
Projectであれば、.p-*
Utilityであれば、.u-*
こちらもBEM同様、プロジェクトの命名規則に従う必要はありますが、一貫性を保つことが大事になります。
