🐸

コーディングの実務でよく使うFLOCSSの知識と運用方法

4 min read

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;
	h1 {
		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="p-section">
	<div></div>
</section>

<section class="p-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
│ └── _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
 */
@import "foundation/_reset";
@import "foundation/_base";

/*
 * layout
 */
@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
@import "layout/_sidebar";

/*
 * object
 */
// Component
@import "object/component/_button";
@import "object/component/_grid";
@import "object/component/_media";
@import "object/component/_title";

// Project
@import "object/project/_articles";
@import "object/project/_comments";
@import "object/project/_gallery";
@import "object/project/_profile";
@import "object/project/_section";

// Utility
@import "object/utility/_align";
@import "object/utility/_clearfix";
@import "object/utility/_margin";
@import "object/utility/_typography";

上のファイルのように@import を使って、全ての Sass ファイルを呼び出して 1 つの CSS ファイルにコンパイルさせます。

FLOCSS のクラス命名

FLOCSS で扱うクラス名は、「--」や「__」などを使っていてどういう規則なのかややこしいですが、基本的に親要素のバージョン違いか子要素かの違いという認識で大丈夫かと。

もう少し具体的な例を挙げるとこんな感じ。

.p-section__item

→子要素のこと。
p-section というクラスの子要素として、item があるというイメージ。

.p-section--work

→親要素のバージョン違い。
p-section のバージョン違いとして work セクションがあるというイメージ。

.p-section__item--red

→子要素のバージョン違い。
p-section 内の item のバージョン違いとして赤色のものがあるというイメージ。

最後に

ということで、FLOCSS の構成や FLOCSS の運用についてのまとめでした。

いざ、FLOCSS のイメージがつかめてきたところで、コーディングしても実際に運用すると規則が破綻したり、うまく分類分けができなかったりします。

その際は、もう一度この記事を読み直したり、FLOCSS の公式ドキュメントを読み直したりして、どうやったら管理しやすく運用できるかを考えてみることをおすすめします。

それでは。

Discussion

ログインするとコメントできます