💭
FLOCSSについてまとめ

2025/01/06に公開
CSS
FLOCSSには3つのレイヤーの概念があり、役割によってそれぞれ区分されています。
1.Foundation

2.Layout

3.Object

 1.Foundationwebサイト全体で利用するベースとなるCSSがFoundationレイヤーで定義します。

以下が具体的なものです。
リセットCSSやノーマライズCSS
全体の背景やタイポグラフィなどプロジェクト全体の基礎となるスタイル

ざっくり要約すると全ページ、全要素に共通するようなcssはFoundationレイヤーに記述するといいと思います。

 2.Layoutヘッダーやフッター、メインとなるコンテンツエリア、サイドバーなどサイト全体で共通化されているようなレイアウトに関わる要素をLayoutレイヤーで定義します。
l-headerのように、プレフィックスとして「l-」付与する場合が多いです。
例
<header class="l-header">
  <img src="xxx" class="l-header__logo" />
  <nav class="l-header__nav">
    ...
  </nav>
</header>
プレフィックスとはプレフィックスとは接頭辞を指します。

基本的にクラス名にプレフィックスをつけることが推奨されています。
・Layout：l-*

・Component：c-*

・Project：p-*

・Utility：u-*
例えば、ボタンComponentであれば「c-button」、カードProjectであれば「p-card」のようにプレフィックスを付けます。

 3.ObjectObjectレイヤーでは、ほとんどの要素が位置付けられるレイヤーであり、その中でさらに3つに分けられます。
Component
Project
Utility

 ComponentComponentは再利用できる最小限のパーツです。

ボタンやタイトルなどページの各所で使い回すような要素をComponentとして定義します。

なるべく余計なスタイルは付与しないようにして、再利用性を考慮するようにします。

マージンやサイズなどをComponentで定義せず、親要素から指定することで再利用性を意識したコードを記述することができます。
例えば、ボタンをComponentとして定義する場合、HTMLは以下のように記述します。
<div class="c-button">
  <p class="c-button__txt">xxx</p>
  <i class="c-button__icon"></i>
</div>
※Componentは最小限のパーツなので、その中に別のComponentを入れることはできません。

 ProjectProjectは、Componentやその他の要素によって構成される要素です。

Componentが最小限のパーツであるのに対して、Projectはもう少し大きな要素を指定します。
例えば、カードのスタイルをProjectとして定義する場合、HTMLは以下のように記述します。
<div class="p-card">
  <img src="xxx" alt="" class="p-card__img">
  <h3 class="p-card__title">xxx</h3>
</div>
p-cardというProjectがあり、その中のComponentを除く子要素はp-card__xxxのようにクラス名を付与します。

 UtilityUtilityは、特定の要素だけ特有のスタイルを付与したい時に利用します。
具体的には以下の場合にUtilityを利用します。
特定の要素だけのサイズを変えたい場合
特定の要素だけの色を変えたい場合
特定の要素だけの余白（margin/padding）を変えたい場合
Utilityを適切に使うことで、無駄なComponentやProjectが増えすぎるのを防ぐことができます。しかし、Utilityばかりを利用してもかえってわかりづらくなってしまうので注意が必要です。
Componentにmarginを定義すると再利用性が低下してしまうため、以下のようにUtilityレイヤーでmarginを付与するクラスを定義しておくことができます。
.u-mbs {
  margin-bottom: 10px;
}

 ComponentとProjectの違い細かなルールは定められていませんが、ざっくりと他ページで使用するものはComponent、そうでなければProjectと定義するという判断基準が定められているケースをよく見かけます。
ただし、基本的にはどちらも同じような使い方ができるので、厳密にルールを守るのではなく、チーム内で共通の認識が持てていれば独自のルールを採用しても問題はないと思われます。

 例外：JS関連のクラスには「js-*」のようにプレフィックスをつけるWebサイト内の特定の要素をJavaScriptで操作したい場合などは、「js-」のようにプレフィックス付きのクラスを付与しておく運用がよく使われています。

こうしておくことにより、CSSとJavaScriptを切り離して考えることができるので、管理しやすく、読みやすいコードに仕上げることができます。

また、アクティブかどうかなど、状態を表す場合は「is-active」のように「is-」の形でクラス名を付与します。
1.Foundation

2.Layout

3.Object

Component

Project

Utility

ComponentとProjectの違い

例外：JS関連のクラスには「js-*」のようにプレフィックスをつける

Discussion
