【CSS設計】小学生でも分かるFLOCSSの概念説明

はじめに

谷拓樹さんの書かれたWeb製作者のためのCSS設計の教科書という本を読みました。
初心者にもかなり分かりやすく、CSS設計で大事な考え方が丁寧に説明されていて、とても勉強になりました。

谷拓樹さんは、日本でよく使われているCSS設計手法のひとつ、FLOCSSの提唱者でもあります。
FLOCSSはFoundation Layout Object CSSの略で、OOCSSやSMACSS、BEMなどの良いところを取り入れた設計方法です。

ただ、初心者で理解力も高くない自分は、最初にFLOCSSの概念に触れたとき、ぱっと腑に落ちませんでした。
書いてあることは分かる。でも、頭の中にイメージが立ち上がってこない。そんな感じです。

自分の中で腑に落ちたイメージ

そこで今回は、自分なりに分かりやすかったたとえ話で、FLOCSSの概念を説明してみようと思います。
実用的な使い方というより、まずはイメージを掴むための話です。

FLOCSSはCSSの片付けルール

最初に一言で言うと、FLOCSSはCSSの片付けルールです。

CSSって、少ないうちは適当に書いても動きます。
1枚のstyle.cssに全部入れても、とりあえず見た目は整う。

でも、ページが増えたり、要素が増えたり、修正が入ったりしてくると、急にしんどくなります。

どこに書けばいいか分からない。
探すのがつらい。
直したら別の場所が崩れる。
同じような見た目が増えて、似たCSSが量産される。

これって、部屋が散らかっていく流れとほぼ同じです。

最初は床に物を置いても問題ない。
でも物が増えたら、どこに何があるか分からなくなる。

FLOCSSは、最初から引き出しを用意して、物の置き場所を決めようという考え方です。

家づくりで考えると分かりやすい

家って、いきなり家具を置かないですよね。
まず土台があって、次に間取りがあって、最後に家具が入る。

この順番があるから、家として成立する。

FLOCSSも同じで、CSSをこんなふうに分けて考えます。

• Foundationは土台
• Layoutは間取り
• Objectは家具

ここで大事なのは、今書いているCSSはどれに当たるのかを先に決めることです。
これが決まると、どこに書けばいいかで迷いにくくなります。

Foundation（土台）

Foundationは、サイト全体に効く基本ルールです。
家でいうと基礎工事みたいなもの。

/* Foundation：全体の土台 */
:root {
  --text-color: #222;
  --bg-color: #fff;
}

body {
  color: var(--text-color);
  background: var(--bg-color);
  margin: 0;
  font-family: system-ui, sans-serif;
}

Layout（間取り）

Layoutは、ヘッダー、フッター、左右のカラムみたいな配置の骨組みです。
家でいうと部屋の配置や廊下の場所。

/* Layout：ページの骨組み */
.l-page {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}

.l-header {
  padding: 16px;
}

Object（家具）

ボタンやカードみたいな、見た目の部品です。
家でいうとソファ、机、棚みたいなもの。

/* Component：定番の部品 */
.c-button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #333;
  text-decoration: none;
}

ここまでで、FLOCSSの半分は理解できたと思います。

一番ややこしいのはObject

そしてこのObjectですが、なんとここから3つに分かれます。
FLOCSSを初見で難しく感じる原因は、だいたいここです。

筆箱をイメージしてみてください。
筆箱の中にはえんぴつや消しゴム、テープや定規のような部品が集まっています。
同じようにページの中には、ボタンや見出しやカードみたいな部品がたくさんありますよね？
あれが全部Objectです。

ここで大事なのは、Objectは1種類じゃなくて、性格の違う3種類が混ざっているということです。

• Component：えんぴつや消しゴムみたいな小さくて汎用的な部品
• Project：筆箱みたいな、いくつかの部品がまとまったセット
• Utility：ちょい足しの道具みたいな、その場で役立つ小さな調整

つまりObjectは、部品そのものというより、部品を扱うための考え方の箱です。
この箱の中を3つに分けておくと、CSSが増えても迷いにくくなります。

Componentはえんぴつや消しゴム

Componentは、えんぴつや消しゴムみたいなものです。

小さな単位で、汎用性が高い。
いろんな場所で何度も使える。
できれば再利用できる形になっているのが理想。

つまりComponentは、使い回す前提の小さな部品です。

例のコードはこんなイメージです。

/* Component：えんぴつや消しゴムみたいな小さい部品 */
.c-item {
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 8px;
}

Projectは筆箱

Projectは、筆箱みたいなものです。

筆箱の中には、えんぴつや消しゴムや定規が入っています。
しかも筆箱って、人によって特色が出ます。

• 2段の筆箱
• ペンが大量に入っている筆箱
• 消しゴムが3個入っている筆箱
• 中身が最小限でスッキリしている筆箱

同じ筆箱でも中身の組み合わせが違うし、そもそも筆箱自体の形も違う。
Projectは、そういう部品のまとまりです。

基本的にComponentの方が小さくて、Projectの方が大きな塊になります。

例のコードはこんなイメージです。

/* Project：筆箱みたいなまとまり */
.p-pencilCase {
  padding: 16px;
  border: 2px solid #333;
  border-radius: 12px;
}

.p-pencilCase__title {
  font-weight: 700;
}

Utilityはちょい足しの道具

Utilityは、ちょい足しの道具です。

消しゴムのカスを払う小さいハケとか、輪ゴムとか、テープとか。
あると助かるけど、こればっかり増えると、筆箱の中がわけわからなくなるやつです。

例のコードはこんなイメージです。

/* Utility：ちょい足し */
.u-text-center {
  text-align: center;
}

どの範囲で見るかで判断は変わる

ここがややこしいところで、ComponentかProjectかは、どの範囲で見るかによって変わってきます。

例えば筆箱は、自分にとっては1つしか持っていない大切なものです。
だから自分目線だと、特別なProjectっぽく感じます。

でも学校という単位で見れば、筆箱は何百個も存在します。
そうなると、それは汎用的なものとして扱えて、Componentっぽく見えてきます。

この視点のズレが、ComponentとProjectの区別が難しくなる理由で、人によって判断が分かれやすいところらしいです。

迷ったらこう覚える

とはいえ、初心者のうちはざっくり覚えても大丈夫だと思います。

• 3回以上同じ要素として出てくるものならComponent
• そうじゃないならProject

最初から完璧に分類しようとすると詰まるので、まずはこの基準で進めて、増えてきたらComponentに寄せるくらいの気持ちでも良いとおもいます。