こんにちはTANE-beのエンジニアです！
皆さんはCSSをどのように意識して記述しているでしょうか？
CSSの書き方は10人いれば、書き方も10通りあると言われるほど、自由に構築することができます。しかし、その自由さが原因で書き方を乱雑にしてしまうとCSSが重複したり、修正の際に大変になることがよくあります！

CSSの中身を見ると!importantを使い回されていたり、1つのCSSを変更するといろんな箇所のスタイルが変更されたりと色々大変な目にあったことも！
そこで今回は、破綻しないCSS設計、FLOCSS(フロックス)についてご紹介しようと思います。

FLOCSS（フロックス）とは？？

FLOCSS(フロックス)とは、「CSS設計の教科書」の著者でも有名な谷拓樹さんが提唱したCSS設計手法です。FLOCSS(フロックス)のF、L、Oは各構成の頭文字をとっており、それぞれF(Foundation)、L(Layout)、O(Object)、またO(Object)の中には、Component、Project、Utilityなどから成り立っています。
日本人が提唱した方法なのでGitHubも日本語で解説されているのでわかりやすいかと思います！

FLOCSS（フロックス）の構造について

FLOCSS（フロックス）は、CSSを細かく使用構成別に分割することで、保守性の高い崩れにくいCSSを記述することを目的としています。また、CSSを読み込む順番も上からFoundation、Layout、Component、Project、Utilityとすることでより崩れないCSS設計になります。
それぞれのフォルダ構造の内容は公式では以下のように記載されております。

しかし公式サイトの方法だと、
CSSをどこの分類に記述するかが難しいという意見を耳にします。
私自身も公式サイトの方で説明を見たのですが、CompornentとProjectの区別などが分かりづらいなと感じました。

そこで、TANE-beではFLOCSSを少しアレンジして以下のようにCSSの運用を行なっております。

主な変更箇所は以下です。

・Compornentには小さい単位のモジュールだけではなく共通で使いたいパーツを全て記述する。
・ProjectにはCompornentのブロックではなく、各ページごとに使用したいCSSを記述する。

CSS設計には正解がなく、自分でこうした方がもっと記述しやすいのではないかなどあるかと思います。
他にも色々と工夫次第でCSS設計の可能性が広がるかと思います。

FLOCSS(フロックス)の基本的なclassの書き方

FLOCSS(フロックス)には基本的なCSSの記述方法が決まっています。
ルールはとても簡単で、Layoutのclassには.l-、Componentのclassには.c-、Projectには.p-、Utilityには.u-というように、
フォルダの頭文字をclassに記述するということです。共通パーツのボタンなら.c-btnや、各ページのitemなら.p-itemみたいな感じですね。

また、FLOCSS(フロックス)のclassの命名規則には「BEM」という書き方が使われることが多いです。
BEMとはBlocks-Elements-Modifiersの略で、簡単にいうと親のブロック要素を引き継いでclass名を書くようなイメージになります。

例としては以下のようなイメージです。

<section>
　<div class="p-home__cont">
　　<h2 class="p-home__cont-ttl">タイトルが入ります</h2>
　　<p class="p-home__cont-txt p-home__cont-txt--small">テキストが入ります</p>
   <p class="p-home__cont-txt p-home__cont-txt--big">テキストが入ります</p>
  </div>
</section>

注意点

• BlockとElementは__で区切る
• Element以下のclass名は-で区切る
• Modifier（色の変化や微妙にスタイルを変更したいスタイル）は- -で区切る

FLOCSS（フロックス）のメリット

これまでFLOCSS(フロックス)について説明してきましたが、FLOCSS(フロックス)設計にすることで、何がどういう感じでいいの？と感じた人がいるかもしれません。
そこで、何点かFLOCSS（フロックス）のメリットをいくつか紹介していきたいと思います。

CSSの再利用がしやすい

普通にCSSを記述してしまうと、微妙な違いのレイアウトでも一からCSSを記述しないといけなくなってしまいます。CSSをパーツ化することによって、再利用がしやすくなります。その結果、CSSの記述量が減り、すっきりとしたCSSを書くことができます。

クラスの役割が予測しやすい

命名規則が決まっているのでクラス名から役割が想像しやすいです。頭文字でcなら共通パーツなんだな、pならページごとのCSSなんだなと一目見て理解することが出来ます。役割を知ることで修正する際にも素早く対応することが出来ます。

クラス名の定義が決まっているので、複数人で作業しやすく修正しやすい

例えば複数人でコーディングを行う場合、皆が多様なCSSの命名をすると、必ずと言っていいほどCSSの競合に合います。それに比べてFLOCSS（フロックス）はクラス定義が細かく定まっているので、複数人での作業がしやすいです。FLOCSS(フロックス)の構造やBEMの書き方を徹底しておけば、クラスの競合は格段に減るかと思います！
また、ルールも整っているので他の方が記述した修正箇所も対応しやすくなります！

CSSの破綻が起きにくい

class名をFLOCSSの記述ルールと合わせてBEM方式で記述していくため、1つのCSSが複数のスタイルに絡んだり、重複したりなどのCSSの破綻が起きにくいです。

FLOCSS（フロックス）のデメリット

では逆にFLOCSS(フロックス)のデメリットはなんでしょうか？
基本的にはCSSの書き方をルール化して良くしよう！という目的で考えられた設計方法なので大きいデメリットはありませんが、個人的に少し困った箇所などをご紹介いたします。

class名がどうしても長くなってしまう

BEM形式で親要素class名を継承して記述していくのでclass名がどうしても長くなってしまいます。そのため、htmlの記述が少し見えづらくなってしまうかもしれません。

レイヤー分けのときに迷ってしまう

classを作成する際に、このclassはlayoutなのかutilityなのかなど、作成する場所に迷ってしまう時があります。

命名に苦しんでしまう

細かい箇所まで命名しないといけないので、命名が少し大変になります。

まとめ

今回はCSS設計のFLOCSS(フロックス)についてまとめてみました。FLOCSS(フロックス)の何よりの利点は、チーム開発、保守がしやすいことだと思います。CSSの記述方法が決まっていなければ、CSSの競合が頻繁に起きたり、修正に時間がとてもかかってしまいます。FLOCSS(フロックス)はルールが厳格化なので初めは慣れるのに時間がかかってしまうかと思いますが、classを一目見ることで、このclassがどういったスタイルを持っているのかがすぐに分かるようになります。

FLOCSS(フロックス)設計に慣れることが出来れば、classスタイルの予測、CSSの再利用、保守、拡張が格段にしやすくなります！
是非CSS設計を導入する際の参考になれば嬉しいです！