こんにちは！管理人のあやかです。
直近でFLOCSSを扱うようになり、導入して気づいたメリットをご紹介していきたいと思います。
また、つい最近FLOCSSを導入したことによりCSSファイルを112→1ファイルに減らしたという貴重な実体験をしたので、そちらについても交えていこうと思います。
この記事では、
・FLOCSSとは何か
・FLOCSS導入のメリット
・実例
をまとめていきたいと思います！！
FLOCSSを取り入れることで保守性しやすい・再利用しやすい・拡張しやすいCSSを書くことができるので、是非取り入れましょう！
FLOCSSとは
FLOCSSとは、「フロックス」と呼びます。CSS設計思想の一つで、他にはOOCSS・BEM・SMACSSなどいろいろあります。
公式URL：https://github.com/hiloki/flocss
FLOCSSの大まかな概念やルールについては、公式を参考にしていただければと思います。
最初はFLOCSSの構造に混乱するのですが、その度に公式を見返していました。
また、FLOCSSは日本の方が作られたCSS設計なので、他の方もブログ等で使い方を詳細に書いている方もたくさんいらっしゃいます。
FLOCSSって何！？よくわからないよ！という方は以下のサイトの一度ご覧ください！とても参考になります。
-FLOCSSを使って破綻しにくいCSS設計を！
https://haniwaman.com/flocss/
-[CSS設計] 私のためのFLOCSSまとめ
https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0
CSS設計をより詳しく知りたい方は、FLOCSSを開発した方が著者をしている「Web制作者のためのCSS設計の教科書」を一度ご覧ください。
どんなCSS設計をすればベストなのか？という考え方を学ぶことができます。
勉強を始めたばかりの方にも是非読んできただきたい一冊です！オススメ！
ざっくりFLOCSSの構造
FLOCSSは、他のCSS設計と違いファイル構成やネーミングルールまである程度指定されています。
私個人の考え方として、FLOCSSのファイル構成はSassと一緒に使うことによって真価を発揮すると考えています。
なぜなら、細かくファイルを分割することによって可読性が上がり、ファイル名をルール化することにより予測しやすくなるからです。
よって、基本的にはSassを使用します。
以下は独自ルールを加えたFLOCSSのファイル構成です。
SASS/
├── foundation リセットCSSやベースのデフォルトスタイルなどを管理するディレクトリ
│ ├── _base.scss
│ ├── _mixins.scss
│ ├── _utility.scss
│ └── _variables.scss
├── layout ヘッダーやフッターなど共通のレイアウトに関するものを管理
│ ├── _contents.scss
│ ├── _footer.scss
│ ├── _header.scss
│ └── _sidebar.scss
└── object
│ ├── component ボタンなど再利用できる最小限のパーツを管理
│ │ ├── _article.scss
│ │ ├── _button.scss
│ │ ├── _card.scss
│ │ └── _heading.scss
│ ├── project いくつかのcomponentと、他の要素によって構成されるパーツを管理
│ │ ├── _comments.scss
│ │ ├── _gallery.scss
│ │ └── _pager.scss
│ └── utility marginなどちょっとした調整のために使用するものを管理
│ ├── _position.scss
│ ├── _size.scss
│ └── _text.scss
└──pages 個別ページにしか使わないスタイルを管理
│ ├── about
│ │ └── _index.scss
│ ├── company
│ │ └── _index.scss
│ └──top
│ └── _index.scss
└── style.scss
公式と違うのは、独自ルールとして新たにpagesディレクトリを追加しました。
30ページくらいあるコーポレートサイトですと、会社概要ページなどの個別ページで同じデザインを使うことは経験上あまりないです（私だけかな…）
「デザイン別だけど、projectなのか？でもそうするとprojectの中身が多くなってしまってパッと探せなくなる」と考えたので、pagesディレクトリを追加して、個別ページのデザインに対応したCSSファイルはこのディレクトリで管理をすることにしました。
他にも、色違いのページはThemesディレクトリを追加したりなどディレクトリ単位で拡張もできるようです。
拡張性が高いことはFLOCSSのメリットの一つと言えます。
FLOCSSの書き方
FLOCSS特有のネーミングルールとして、ディレクトリに関連したルールがあります。
componentなら「c-**」、projectなら「p-**」のような名前を頭につけるルールです。（プレフィックスをつける、という言い方もします。）
独自ルールのpagesでは、「page-**」のような名前を頭につけることをルールに加えました。
この「c-**」などを頭につけることによるメリットとして、
・どのディレクトリに所属しているかがすぐに分かる
・名前の競合がしにくくなる
といったメリットがあります。
名前の競合がされにくくなるということは、名前が被ってしまった時に上書きされる心配もなくなります。
構造・ファイルから見たFLOCSSのメリット
上記のファイル構成の時にいくつかメリットを書いたのですが、まとめると以下になります。
- FLOCSSはOOCSSやSMACSS、BEM、SuitCSSなどのいいとこ取りしたCSS設計思想
- ディレクトリ名・ファイル名をルール化することによってどのファイルに何の機能のCSSファイルが入っているか予測しやすい
- ファイルを細かく分けることによって可読性があがる
予測しやすい・可読性が良い・拡張性の良いといった三拍子揃ったCSS設計かつ、ルール化することによりネーミングに迷わなくなったので考える時間が減るというメリットもありました。
ちなみに、クラス名に悩んだときは以下のqiitaを参考にしています。オススメ。
FLOCSSを利用してCSSファイルをダイエットできた実例
ここからは、私が実際にFLOCSSを使用した実例をご紹介します。
冒頭でも書きましたが、Webサイトの改修案件でCSSファイルを112→1ファイルに、200,000行→7,000行にまで削減できた実例です。
導入前の状態
そもそもなぜCSSファイルがそんなに膨大になってしまったか？ですが、推測するに以下の理由が挙げられます。
- 色が違うだけのページにそのほかで使っていたページのCSSをまるっとコピーしたファイルを使っていた
- ネストが深かった（吐き出されたCSSを見ただけですが、Sassを使っているっぽかった）
- 共通パーツにもいちいちCSSを別々に当てていた
要約すると、「CSS設計？何ですかそれ？」みたいな状態ということでした。
CSSのファイル名も、「style01.css・style02.ccs・style03.ccs」…なんていうものもあり、どのページに何のファイルが使われていて、どこに書かれているかわからない、というひどい状態でした。
さすがに拡張性が悪い・予測しづらい上にファイル数が多いので、読み込み速度にも良い影響を与えないと思った私は、改修と同時に一から作り直そうと踏み切りました。
改修になぜFLOCSSを使ったの？BEMとかあるじゃん？と思った方もいらっしゃるかと思いますが、今回は使い回すパーツが多かったため、FLOCSSにしよう！と思った次第です。
style01.cssなんてファイル名をつけてはダメ、ゼッタイ！！！
書いた本人はわかるかもしれませんが、後から見る人はわかりにくいです！
予測しやすいファイル名にしましょう！
導入にあたっての環境構築について
Sassなどを使用するためにタスクランナーはGulpを使用しました。
Gulpの環境構築はオレインさんの記事を参考にして構築しました。ほぼこれを毎回使用してます。
今回は、オレインさんの記事をアレンジして、sassのimportはglobを使いました。いちいちimport書くのはめんどくさいのでそれはパソコンにやってもらおうね！という理由です。
導入後の状態
その後は、HTMLとCSSを組み直すとともにclass名をひたすらに書き換え…。
最後にコンパイルしたCSSファイルを見たところ、200,000行→7,000行にまで減らしました！
命名規則もファイル名もよくわからなかったファイル数も112→1ファイルにまで減ってすっきり。
色違いのボタンなどもModifierつけるだけで実装可能で楽チンに。
FLOCSSでディレクトリを切っているので拡張性もあります。
CSS設計の知識を持つことで、破綻しにくく・少ない工数で改修出来ることを考えられるようになるというのが実践できた例となったかなと思います。
まとめ
・CSS設計は大事！！！
・CSS設計（FLOCSS）の考え方を持つだけで、メンテナンス性あがるのが最大のメリット
・ディレクトリ名・ファイル名をルール化することによってどのファイルに何の機能のCSSファイルが入っているか予測しやすいようにコード管理しよう
これがFLOCSSを導入したCSS設計のメリットだよ！ということをご紹介できたと思います。
また、勉強を始めたばかりの方にもCSS設計の考え方は是非取り入れて欲しいです。（実例で紹介した悲劇のCSSを生み出さないためにも…。）
FLOCSSは慣れるまで何回もディレクトリ構造を見直したり、考え方が難しく感じたりするのですが、一度理解できてしまえばこっちの方がわかりやすい！と個人的には感じます。
CSS設計を導入する際に何か参考になれば嬉しいです！ではまた。
