業務では複数人でコードを触ることになります。
スタイルをパーツ化することで再利用でき、さらに誰でも編集しやすい(保守性の高い)CSSを書くことは、業務を効率的に行うためにとても重要です。弊社デザイントランスメディアでは、FLOCSS(フロックス)というCSSの構成を少しアレンジして使っています。
この記事では、そのFLOCSS(フロックス)についてご紹介します。
FLOCSS(フロックス)とは
「Foundation Layout Object CSS」の頭文字をとっています。
文字通りFLOCSSでは「Foundation」「Layout」「Object」の3つのレイヤーと、「Object」の3つの子レイヤーで構成されます。
FLOCSS公式ドキュメント：https://github.com/hiloki/flocss
構成
■foundations
サイト全体のスタイルを格納(base.scss、config.scss、mixin.scss、reset.scssなど)
■layout
サイト内で共通するものを格納(header.scss、footer.scss、hamburger.scssなど)
■object
サイト全体で何度も使うものを格納
・component
サイト内で何度も使いまわしたいもののスタイルを指定(btn.scss、heading.scssなど)
・project
各ページごとのスタイルを指定(home.scss、about.scssなど)
・utility
ComponentとProjectでは解決が難しいものや調整のための便利なクラスなどを指定。
弊社ではmarginが5pxずつ追加できる変数を置いています。
foundations
├f-base.scss メディアクエリやremの指定
├f-config.scss フォントや文字色、ベースカラーなどの指定
├f-mixin.scss flexやposition:absolute;での中央寄せなどの指定
├f-reset.scss それぞれのブラウザで設定されている標準スタイルの初期化の指定
layout
├l-header.scss ヘッダーのスタイル
├l-footer.scss フッターのスタイル
├l-hamburger.scss ハンバーガーメニューのスタイル
├l-breadcrumb.scss パンくずリストのスタイル
├…
object
∟component
├c-btn.scss ボタンスタイルの指定
├c-heading.scss 見出しのスタイルの指定
∟project
├p-home.scss
├…
∟utility
├u-utility.scss
├…
命名ルール
「MindBEMding(マインドベムディング)」をベースにしています。
弊社では、FLOCSSのルールと合わせてプレフィックス(接頭辞)＋MindBEMdingという形を採用しています。
まず、FLOCSSのクラスの命名ルールについてお話しします。
■FLOCSSのクラスの命名ルール
FLOCSSはプレフィックス(接頭辞)をつけるのが特徴です。
「foundations」に入れるものは頭に「.f-」、「layout」に入れるものには「.l-」、「project」に入れるものには「.p-」といった感じです。
例えば、「layout」に格納しているハンバーガーメニューのクラスは「.l-hamburger」、「object」の「component」に格納しているボタンのクラスは「.c-btn」となります。この後ろに、MindBEMding(マインドベムディング)のクラス命名ルールに沿ったクラス名が続きます。
次に、MindBEMding(マインドベムディング)のクラスの命名ルールについてお話しします。
■MindBEMding(マインドベムディング)のクラスの命名ルール
・そもそもMindBEMding(マインドベムディング)とは
MindBEMdingは、BEMというCSSの設計方法から派生した命名規則です。
BEM日本語公式ドキュメント：
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
MindBEMdingのクラス名は
・Block(かたまり)
・Element(要素)
・Modifier(修飾)
の3つに分けて命名します。
書くときはこのような形になります。
Block__Element–Modifier
上記コードを「Block__Element–Modifier 」に当てはめると「nav__list__item」の「nav」がBlock、「list」と「item」がElementとなります。
「l-header__nav__list__item」の「l-header」はFLOCSSの命名ルールに沿った記法で、それをアンダーライン2つ(__)でMindBEMdingの命名ルールの記法と繋げています。
ただ、長くなるので「l-header-nav__list__item」のように「l-header」(Block)と「nav」(Element)はハイフン1つ(-)で繋げてもいいかなと思います。
じゃあModifierはどこで使うかというと、赤と青2種類ボタンを用意しパーツ化して使いまわしたいときなどに「.c-btn–red」「.c-btn–blue」と修飾である「red」や「blue」をハイフン2つ(–)で繋げます。
FLOCSSを使ってCSS設計をすることで誰が作ったにかかわらず誰でも触りやすいコードを書くことができます。
これから導入を考えてる方の参考になれば幸いです。
