FLOCSSとは
CSS設計思想の一つで、他にはOOCSSやSMACSSなどがあり、これらに加えてBEMなどの要素を取り込んでいることが特徴です。
FLOCSSに限った話ではないのですが、設計に記述ルールを設けることでコードの保守性が高くなったり、他人にわかりやすくなったりといろいろメリットがあります。
FLOCSSを使うことになった経緯
新卒でWebのフロントエンジニアとしてCSSを触るようになり、最初は簡単なページのサイトのコーディングからはじめました。ページが出来上がっていくに連れてどんどん装飾されていくのがとても面白かったんですが、それと同時に要素同士で干渉したりCSSで打ち消さなければいけないことが増えたりととってもカオスな状態にぶち当たったからです。そんな中CSSをググっていると「CSS設計」というものを知り、設計について勉強することにしました。
CSS設計思想ってなんやねん！という状態の僕が描く混沌としたコードに「秩序」ができました。
めでたし、めでたし！（当然まだ終わらない）
数ある中でもFLOCSSを選んだ理由は
・当時部品系とレイアウトのスタイルの区別が出来ていなくて、どう区別すればいいかわからなかった
・Componentの考え方はあったのでOOCSSがとっつき易かったが、それ以外の秩序がなかったから
・「FLOCSS」という名前がかっこよかったから
FLOCSSの特徴
ディレクトリ構造
ディレクトリ内容を以下に示します。
foundation/
layout/
object/
├─ component/
├─ project/
└─ utility/
Foundation
リセットCSSやノーマライズCSSのような、ブラウザのデフォルトスタイルを初期化するための記述場所。いろんな種類・流派があるみたいなので「リセットCSS」などでググってみると自分にあったものが見つかると思います。
Layout
コンテンツの大部分を構成するようなページ内で単一の存在となるスタイルの格納場所。mainの領域やheader・footerなどを宣言します。先頭に「.l-〇〇」をつけますが、idで指定することもあります。
例： l-header, l-footer など
Object
OOCSSのコンセプトが元になっていて、主にページ内でビジュアル部分を担当しています。Objectは役割別に分割されたComponent、Project、Utilityを内包しています。
Component
このレイヤーはプロジェクト内で複数回使われる部品（Component）のことで、OOCSSでいう構造の部分を担っています。固有の値を持つことはせず、再利用できるようにします。「.c-〇〇」のプレフィックスをつける。
例： c-btn, c-label, c-grid など
Project
プロジェクト内で使い回すスタイルですが、Componentと違うのはそのプロジェクト固有であることが異なっているところです。「.p-〇〇」のプレフィックスをつける。
例： p-menuList, p-placeBox など
Utility
汎用クラスのことで、基本的に単一の機能をもち!importantをつけることが一般的です。「.u-〇〇」のプレフィックスをつける。
例： u-db, u-taC など
##FLOCSSでよかったこと
・コンポーネントの構造と装飾が分割されていて再利用しやすい
・全体のレイアウトに関するスタイルがあるので、マークアップの構造がわかりやすくなる
・明確な命名規則やプレフィックスがあることによってエディタが予測して該当するクラス名を提示してくれるのでコーディングが楽になる。
・ユーティリティ最高
まとめ
FLOCSSはOOCSSとSMACSS、BEMの影響を受けているのでコンポーネントの管理からレイアウトの指定までトータルに出来るのが、いいなと思っています。
今回CSSアーキテクチャの一つとしてFLOCSSを紹介しましたが、たくさんあるので最初はどれから始めればいいかわからないこともあると思います。僕もその一人なんですが、どれにするかはおいといて「とりあえずやってみる」ことが大事だと思ってます。やってみるとこの設計思想が向いているパターンやその思想で対応仕切れないことが見えてくると思うので、サンプルでもいいので何かの思想に基づいて作ってみるといいと思います。
拙い記事ではありますが、ここまで読んでいただきありがとうございます！
（追記）これからやりたいこと
最近はAtomic DesignやReact.jsに興味があるのでその方向で何か作ってみようと思ってます。