俺的、FLOCSSのまとめ

はじめに

皆さんCSSを書くときに設計は取り入れていますでしょうか。
SMACSSやBEMなど様々あると思いますが自分は業務上FLOCSSを使う事が多くあるんですが今だに迷うことがあったりすることがあります。
そこで今回は（自分の為に）基本原則などを自分なりにまとめてみようと思います！

この記事は順次更新していきたいなと思っています。

まずFLOCSS is 何？

FLOCSSとは

いくつかある有名なCSS設計手法の中のひとつで、その有名どころのOOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れたのがFLOCSSです。オブジェクト志向で設計されています。

上述した設計の良いところを取り入れて作られたのがFLOCSSという事ですね！

基本原則

FLOCSSは基本的に3つのレイヤーとObjectの子要素のレイヤーで構成されています。

1. Foundation

このレイヤーではサイトで使用するデフォルトスタイルを管理します。
そのプロジェクトで使用する基本的なスタイルの定義ですね。
base.scss
reset.scss
mixin.scss
...etc

2. Layout

ヘッダーやフッターなど大枠のレイアウトに関する定義をこちらのレイヤーで定義します。
l-header.scss
l-footer.scss
...etc

3. Object

サイト全体で利用ができるモジュールを管理する。
細かく以下の3つに分けられます。

3-1 Component

再利用が可能な最小単位のパーツ、基本的にどのページであっても使用出来るのが好ましいと思ってます。
c-btn
c-card
...etc

3-2 Project

サイト固有で使用するパーツ、Componentと他の要素が集まったものがProjectに当たります。
p-article
p-contact
...etc

3-3 Utility

Component, Projectのモディファイアで解決することができないスタイルをここに記述していきます。
要するに細かく見た目の調整を行うときにUtilityにスタイルを定義することが多いです
u-text
u-color
u-size
...etc

色々ここに書きましたがFLOCSS作者様がGithubに詳しく詳細を書いてくださっているのでご興味を持たれた方は是非こちらを参照してください

◆ FLOCSS

ComponentとProjectの使い分け難しい問題

これは非常にわかります、僕自身今でも結構な頻度で「え、これどっち？」ってなっています。

上述しましたがComponentは最小単位のパーツを定義する部分なのでc-~で命名しようと思ったときにこれ以上細分化出来ないかどうかで判断するといいと思います。
例えばc-cardとした時にそのカード内はそれ以上細分化することは出来ないのかどうか。

出来ないのであればComponentが適切だと思いますが出来そうなのであればそれはProjectにしてしまった方がいいのでは？と個人的には思っています。
あくまでProjectはComponentの集まりだと思っているのでこのような考え方で命名していけば問題ないのかなと思います。

命名規則について

FLOCSSではMindBEMdingという命名規則が使われています。

MindBEMdingって？

MindBEMdingとはBlock, Element, Modifierで構成する命名規則。
・Block：構成の元となる要素、機能上独立したページの構成要素で、再利用できるもの
・Element：Blockの中に存在する子要素、構成要素、そして別Blockに移動すると使えないもの
・Modifier：BlockまたはElementが変化した状態の要素、見た目や状態、挙動を定義するもの

必ずBlockが一番先頭に来て、そのあとにElementやModifierが付く形となる。
Elementが付く場合はアンダースコア二つで区切り、Modifierが付く場合にはハイフンで区切る

1. Block : 一番大きな塊 ElementとModifierの親に当たる　p-footer 例）
2. Element : __で繋げる、Blockの中で使われる部品 p-footer__label 例）
3. Modifier : --で繋げる、BlockやElementと見た目が異なるもの（少し小さい、色が違うなど） p-footer__label--small 例）