この投稿を読んでわかること
- FLOCSS設計について
- どんな時に使う手法なのか
- 初心者が覚えておくといいこと
FLOCSSについて書いてある本を読みながら睡魔と格闘
CSS設計を考える上で、OOCSS・SMACSS・BEM・MCSSなど色々な手法がありますよね。
FLOCSSもその一つです。
初心者ながらそろそろhtml/cssにも慣れてきたし、チーム開発について考えたろと思って、本を手に取ってみましたが、ちんぷんかんぷんで、気づいたら意識が途切れ途切れに 
「スヤァ・・・」
そんな私も実際にFLOCSSの設計をやってみたら理解が深まったので、忘れないうちにまとめようと思います。
(Sassと一緒に用いたので、Sass前提で記載しています。)
FLOCSS設計とは
CSS設計の一種。
要素を「Foundation」「Layout」「Object」の3つに分類し、さらに「Object」を「Component」「Project」「Utility」の3つに分類、CSSを整理・管理しやすくする手法のことを指します。
Foundation
Layout
Object/
├── Component
├── Project
└── Utility
そもそもなぜCSSを整理する必要があるのか
まずなんで、この分類をするかということですが、上からダーッッと書いていったCSSと、最初に考えられてから書いたまとまったCSS、どちらがいいでしょうか？
1ページだけの簡単なHPを作るだけなら、前者でも問題ないかもしれませんが、そんな制作よりたくさんのページがあるHPの方が多いし、チームで作り上げるとしたら断然見やすい後者の方がいいですよね。
「どのCSSがどこに効いてるかわからない」
「似たようなクラスがいくつもある」
「1ヶ所直したら別の場所が崩れた…」
そんな悩みを解決するためにCSSの整理をする必要があり、それを上記の6つのカテゴリに分類して見やすくしようとしたのがFLOCSSという手法です。
どうやって分類するのか
FLOCSSでは以下のような分類にCSSを分けます。
| 階層 | 主な役割 | 例 |
|---|---|---|
| Foundation | 初期設定（リセットCSS・変数など） |
_reset.scss, _variables.scss
|
| Layout | サイト全体の構造 |
.l-header, .l-footer
|
| Component | 使い回しできるコンポーネント部品 |
.card, .modal, .accordion
|
| Project | 特定ページ固有のスタイル |
.p-about, .p-service
|
| Utility | ちょっとしたスタイル調整 |
.u-mt20, .u-text-center
|
それぞれの内容を詳しく見ていきます。
Foundation
基礎の設定のことを指します。
サイト全体で共通する初期化・設計のベースが該当します。
Foundation
例：リセットCSS、フォント設定、カラー変数、画面サイズの変数等
/*Baseの設定*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #333333;
font-size: 1.6rem;
font-family: 'Helvetica Neue', sans-serif;
min-width: 350px;
width: 100%;
}
img,
video,
object {
max-width: 100%;
height: auto;
border: none;
display: block;
}
a {
color: #0066c0;
text-decoration: none;
transition: 0.4s;
}
}
/*colorの変数*/
$color-base: #fff;
$color-main: #FF2A2A;
/*画面サイズの指定*/
@mixin breakpoint($point) {
@if $point == tablet {
@media (min-width: 640px) {
@content;
}
}
@if $point == pc {
@media (min-width: 750px) {
@content;
}
}
}
Layout
レイアウトという名前の通り、ページ全体の大分類、枠となる部分のことです。
Layout
ページ構成の枠組み部分を指す（ヘッダー、フッター、メインなど）
.l-で始める命名ルールが通例
.l-header {
width: 100%;
background-color: #fff;
}
Component
汎用性が高く、再利用できるパーツをここに分類します。
Component
共通で使用したい指定を行う（ボタン、インナーなど）
.c-で始める命名規則を使い役割を明確にすることが推奨されている
.c-button {
display: inline-block;
padding: 3px 20px;
color: $color-base;
background-color: $color-main;
border: solid 2px $color-main;
border-radius: 50px;
font-weight: bold;
text-decoration: none;
}
}
Project
ページ固有のスタイル、コンテンツを構成する具体的な要素のこと。
Project
特定の1ページでしか使わない装飾(セクションごとの装飾など)
命名は.p-で始め、Componentとの混同を避ける
.p-cv {
&__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.c-button {
display: block;
margin: 15px auto;
font-size: 3rem;
border: 5px solid $color-main;
}
Utility
わずかなスタイル調整のための便利なクラスを定義する。
Utility
1個程度の要素の変更として幅・マージン・フォントサイズなどの即効性のある装飾を指定する
.u-で始めて、すぐに見分けがつくようにする
.u-mt20 {
margin-top: 20px;
}
FLOCSSにおける命名規則は？
基本はBEMに則った書き方をします。
BEMに関する命名方法についてはこちらの記事の中に記載してあるので、よければ参考にどうぞ
考え方としては以下の通りです。
| BEM要素 | 役割 | 例 |
|---|---|---|
| Block | 大枠となるブロック要素 （sectionなど） | .p-cv |
| Element | Block中の要素（section中のdivなど） | .p-cv__content |
| Modifier | BlockやElementのスタイル（見た目や状態など） | .p-cv--color |
SCSSにおけるディレクトリ構成
FLOCSSとSCSSを用いた時のディレクトリ構成は以下のような例になります。
ディレクトリとして「Foundation」「Layout」「Object」「Component」「Project」「Utility」が存在し、その中に分類されているスタイル設定がSCSSファイルの名前に記載されています。
scss/
├── foundation/
│ ├── _reset.scss
│ └── _variables.scss //colorやsizeを指定
├── layout/
│ └── _header.scss
├── object/
│ ├── component/
│ │ ├── _button.scss
│ ├── project/
│ │ └── _about.scss
├── utility/
│ └── _spacing.scss
├── style.scss（全体の読み込みファイル）
でも分類に迷いそう…
色々な記事を読んでいるとFLOCSSは現在進行中のガイドラインで、使う人・チームごとに自分たちのわかりやすい分類・命名をすることができるようです。
つまり、プロジェクトに最適な分類方法・命名方法を見つけるための便利ツールとなるのがFLOCSSの考え方でこれ通りにきっちりやれというわけじゃないのです。
いや、結論「それがむずいんじゃん！！！！！！！」ってなりますが、経験を経てやりやすい方法を見出すということですね。
人生簡単ではない…
初心者に伝える「これがFLOCSSだ！」
FLOCSSは「CSSにルールを与える設計手法」
最初は難しく感じるが、分類と命名の意識だけでも効果あり
BEMと組み合わせることで、スタイルの意味が明確に
小さなUIからFLOCSSの設計を体感しよう！
最後に
脳筋思考ですが、やってみんとわからんよということですね。
最初インプットと称して、本やら記事やらありますが、概要を頭に入れたら、まずやって慣れるがエンジニアとして大切な精神なのかもしれません。（私見なので違っていたらすみません）