【モダンなCSS設計手法】FLOCSSとは？コーディングの実務でよく使う運用方法を解説
FLOCSSは、OOCSSやSMACSS、BEMなどのコンセプトを取り入れたCSS設計のことです。
様々なCSS設計の概念やメリットを取り入れているため、管理や運用が破綻しにくい一方で、概念として理解しにくい点も多々あります。
なので、今回は、FLOCSSの構成やSass×FLOCSSの運用方法についてまとめました。
皆さんのコーディングの参考になれば幸いです。
FLOCSS の構成
構成は Foundation、Layout、Object で構成されます。
Foundation
foundation は、リセット系 css の読み込みや、そのサイトの基本となるスタイルを定義します。
大概は_base.scssや変数を定義するファイルが入ります。
Layout
layout は、ヘッダー、フッター、コンテンツエリアなど、サイト全体の共通部分となるものを定義します。
接頭辞は l-をつけて、l-header クラスと名付けてコーディングすることが多い印象。
.l-header {
position: sticky;
&__logo {
font-size:2rem;
}
}
Object
Object は、サイト内の各パーツのビジュアルに関するものを定義するファイル。
Object は大きく 3 つに分かれて、
- Component
- Project
- Utility
と分類されます。
Component
硬い言い方でいうと、再利用することができる最小単位のモジュール。
簡単にいうと、サイト内で何かしら使うパーツのこと。
具体的な内容としては、button や title など。
接頭辞は c-をつけて、c-button クラスとしてコーディングします。
.c-button {
display: inline-block;
text-align: center;
}
Project
Project は Component とかのカタマリで構成されるものです。Project で、グローバルナビや問い合わせフォームのスタイリングをします。接頭辞は p-をつけて、p-contact クラスとしてコーディングすることが多いです。
.p-contact {
text-align:center;
}
Utility
utility は、一部分だけ微妙にスタイリングが必要になったときに使うディレクトリ。
Component や Project を拡張したり装飾するやつ。
具体的には、最後のセクションだけ下の margin だけ設定したい場合、以下のようにコーディングします。
<section class="c-section">
<div></div>
</section>
<section class="c-section u-margin--bottom0">
<div></div>
</section>
.u-margin {
&--bottom0 {
margin-bottom: 0;
}
}
こんな具合に一部分の修正を utility で賄うことで、 Component や Project を破綻を防ぎます。
FLOCSS を活用した Sass ファイルの運用
FLOCSS の構造規則は Sass のファイル分けで活用すると、管理しやすくておすすめです。
Sass ディレクトリの構成
ざっとディレクトリ構成を紹介するとこんな感じ。
scss
├──style.scss
├── foundation
│ ├── _base.scss
│ ├── _system.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _grid.scss
│ ├── _media.scss
│ └── _title.scss
├── project
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ ├── _gnavi.scss
│ ├── _hamburger.scss
│ ├── _profile.scss
│ └── _section.scss
└── utility
├── _align.scss
├── _clearfix.scss
├── _margin.scss
└── _typography.scss
scss ディレクトリ直下の style.scss 以外は、個別でコンパイルされないようにファイル名の最初に「_（アンダーバー）」をつけています。
style.scss ファイルの内容
style.scss には直接スタイリングせず、他の Sass ファイルを呼び出してコンパイルさせる役割を担当します。
/*
* foundation
*/
@use "foundation/_reset";
@use "foundation/_base";
/*
* layout
*/
@use "layout/_footer";
@use "layout/_header";
@use "layout/_main";
@use "layout/_sidebar";
/*
* object
*/
// Component
@use "object/component/_button";
@use "object/component/_grid";
@use "object/component/_media";
@use "object/component/_title";
// Project
@use "object/project/_articles";
@use "object/project/_comments";
@use "object/project/_gallery";
@use "object/project/_profile";
@use "object/project/_section";
// Utility
@use "object/utility/_align";
@use "object/utility/_clearfix";
@use "object/utility/_margin";
@use "object/utility/_typography";
上のファイルのように@import を使って、全ての Sass ファイルを呼び出して 1 つの CSS ファイルにコンパイルさせます。
FLOCSS のクラス命名
FLOCSS で扱うクラス名は、「--」や「__ 」などを使っていてどういう規則なのかややこしいですが、基本的に親要素のバージョン違いか子要素かの違いという認識で大丈夫かと。
もう少し具体的な例を挙げるとこんな感じ。
子要素の「__」
.c-section__item
→子要素のこと。
c-section というクラスの子要素として、item があるというイメージ。
親要素のバージョン違いの「--」
.c-section--sub
→親要素のバージョン違い。
c-section のバージョン違いとして sub セクションがあるというイメージ。
子要素のバージョン違いの「__」「--」
.c-section__item--red
→子要素のバージョン違い。
c-section 内の item のバージョン違いとして赤色のものがあるというイメージ。
FLOCSSの課題感…
モダンなCSS設計手法であるFLOCSS。
実際に1年以上、FLOCSSをベースにCSSのコーディングをしているなかで感じた課題感や改善方法をざっと書き出してみます。
- projectとcomponentの違いがわかりにくい問題
- 命名を要素ベースか内容ベースか問題
- 運用しているとutilityがカオスになる問題
- 複数ページでの運用が難しすぎ問題
projectとcomponentの違いがわかりにくい問題
FLOCSSでコーディングした人なら誰もが経験したであろうprojectとcomponentの違いがわかりにくくぐちゃぐちゃになる問題。
いろいろ運用方法を試した結果、現状としてはprojectはページ単位でCSSを当てるときのみ利用することにしています。
トップページのみで利用するCSSはp-homeのようなCSSクラス名を当ててコーディングするという具合です。
.p-home__fv {
display:flex;
}
明日から使えるCSS設計【PDFLOCSS】という無料書籍を参考にしました。
命名を要素ベースか内容ベースか問題
クラス名をsection,cta,titleのような要素名をベースに命名するか、about,service,faqのような内容をベースに命名するか問題。
今のところの方針としては、
- componentにあたるクラス名は要素ベースで。
- projectにあたるクラス名は内容ベースで。
というスタイルになっています。componentとprojectの特性的におそらくこのような命名になるかなと思いますが…。
運用しているとutilityがカオスになる問題
サイトを運用・修正している間に、気付いたらutilityがカオスになっている問題です。
u-margin--bottom0,u-margin--top0と徐々にutilityの要素が増えすぎてしまいがち。
なので今の方針として、基本はutilityは使わず、「--」によるバージョン違いで運用するようにしています。
<section class="c-section u-margin--bottom0">
</section>
という運用をしていたのを、
<section class="c-section--sub">
</section>
.c-section{
・・・
&--sub{
@extend .c-section;
margin-bottom:0;
}
}
というように運用する感じです。
これに関してはもう少し改善の検討が必要かなと思いますが…。またより良い方法があれば更新します。
複数ページでの運用が難しすぎ問題
複数ページのコーディングだとFLOCSSのどのフォルダに何をスタイリングしていくかがカオスになりがちです。
ここに関しては、先程触れたprojectをページ単位で考えてスタイリングする手法を取り入れて何とかやっています。
最後に
ということで、FLOCSS の構成や FLOCSS の運用についてのまとめでした。
いざ、FLOCSS のイメージがつかめてきたところで、コーディングしても実際に運用すると規則が破綻したり、うまく分類分けができなかったりします。
その際は、もう一度この記事を読み直したり、FLOCSS の公式ドキュメントを読み直したりして、どうやったら管理しやすく運用できるかを考えてみることをおすすめします。
それでは。
Discussion