FLOCSSで管理するとSassはもっと使いやすくなる[CSS設計思想]

2022 7/05

2022-07-05 2022-07-05

Sassはスタイルに関する記載をファイル分割できて便利ですよね。

でも……

「思いつくままにファイル分割していたら、ファイルがぐちゃぐちゃになってどこに何が書いてあるか分からない…」

そんな事態になってしまったあなたのために、今回はFLOCSSをご紹介します。

FLOCSSはCSSの設計思想の1つで、スタイルをレイヤー分けして管理します。

この記事では、FLOCSSを具体的な構成とともに解説します。

山田ねこ

現役システムエンジニアの山田ねこが解説します！

FLOCSSとは？

FLOCSSはCSSの設計思想の1つです。

フロックスとよみます。

hiloki/flocss: CSS organization methodology.により提案されました。

FLOCSSでは、スタイルをレイヤーに分けて考えます。

FLOCSSのレイヤー

Foundation … サイト全体のデフォルトスタイルを定義する
Layout … サイト全体のレイアウト要素を定義する
Object … 繰り返し使うパーツを定義する
1. Component … 1つのパーツを定義する（例：ボタンなど）
2. Project … 特定の場所でのみ使うパーツや複雑なものを定義する（例：記事デザインなど）
3. Utility … 補助的に使う便利スタイルを定義する（例：余白を付け足したいとき用のスタイルなど）

FLOCSSはSassに特化したものではありません。

ですが、レイヤーの考え方がSassのファイル分割と相性が良いため、FLOCSSを使うことでSassをより便利に使いこなすことができます。

FLOCSSの具体的な構成例を見てみよう

FLOCSSでファイル分割をした具体例を確認してみましょう。

全体の構成

FLOCSSを使ってスタイルのファイルを分割すると、次のようになります。

global.scssが読み込み元となるファイルです。

styles/
├ Foundation/
│  ├ _base.scss
│  ├ _mixin.scss
│  ├ _reset.scss
│  └ _variable.scss
├ Layout/
|  ├ _l-footer.scss
│  ├ _l-header.scss
|  ├ _l-main.scss
|  └ _l-wrapper.scss
├ Object/
│  ├ Component/
│  │  ├ _c-button.scss
│  │  ├ _c-grid.scss
│  │  ...
│  ├ Project/
│  │  ├ _p-article.scss
│  │  ├ _p-profile.scss
│  │  ...
│  └ Utility/
│  │  ├ _u-margin.scss
│  │  ├ _u-padding.scss
│  │  ...
└ global.scss

ここでは次の点に気をつけましょう。

最終的に読み込むファイル(global.scss)以外はファイル名を_(アンダーバー)始まりにする。
Layout配下のファイルにはl-のプレフィックスを付ける。
Component配下のファイルにはc-のプレフィックスを付ける。
Project配下のファイルにはp-のプレフィックスを付ける。
Utility配下のファイルにはu-のプレフィックスを付ける。

最終的に読み込むファイル以外はファイル名を_（アンダーバー）始まりにする。

Sassでは、ファイル名を_（アンダーバー）始まりにすると、他のscssファイルから読み込まれるファイルであることを明示できます。

_（アンダーバー）始まりにしたファイルは、他のファイル（この場合はglobal.scss）から@useを用いて読み込みます。

Sass: Sass Basics

ファイル名にプレフィックスを付ける

下記のフォルダ配下のファイルにはプレフィックスを付けましょう。

フォルダ	プレフィックス
Layout	l-
Component	c-
Project	p-
Utility	u-

プレフィックスを付けることで、役割が明確になります。

_（アンダーバー）との組み合わせで、_l-、_c-、_p-、_u-始まりになるよ。

Foundationフォルダ配下のファイル

Foundationフォルダの役割は、リセット用のCSSを用いたブラウザのデフォルトCSSの初期化やサイト全体で使う基本的なスタイルの定義です。

Foundationフォルダの配下には次のファイルを含めます。

ファイル名	内容
_reset.scss	リセット用のCSSを定義もしくは読み込みます。 2022年おすすめリセットCSSとは？CDNや特徴 – reset css – FUERU
_base.scss	サイト全体の基本的なスタイルを定義します。
_variable.scss	サイト全体で使う変数を定義します。
_mixin.scss	サイト全体で使う@mixin関数を定義します。

_base.scss

_base.scssの中身は、例えば下記のような感じです。

html {
  background: #fdfdfd;
　color : #333333;
}
a {
  color: #1a0dab;
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}

特にクラスを指定せず、全体に適用したいスタイルを定義するよ。

Layout配下の中身

プレフィックスを付けたファイル名の中身について、クラス名をファイル名にあわせます。

Layout以外にも、Component・Project配下のファイルについてもクラス名をファイル名にあわせましょう。

例えば、_l-wrapper.scssであれば、次のように記載します。

.l-wrapper {
  // サイト全体のwrapperの余白などを定義
}

クラス名を合わせておくことで、役割が分かりやすくなるよ。
HTML側からたどりやすくなるというメリットもあるよ。

Layoutフォルダ配下のファイルには中身の細かいデザインは極力入れず、位置や余白など、サイト全体のレイアウトに関する部分だけを入れるようにします。

細かいデザインは、Projectフォルダ配下にファイルを作成し、そこで行うようにしましょう。

サイトの全体像として、HTMLに落とし込んで考えてみると分かりやすくなると思います。

<div class="l-wrapper">
  <div class="l-header">header<div>
  <div class="l-main">main<div>
  <div class="l-footer">footer<div>
<div>

Component配下の中身

Component配下には、サイトの中でよく使うパーツのスタイルを定義します。

典型的な例は、ボタンのスタイルです。

.c-button {
 // ボタンのスタイルを定義する
}

Project配下の中身

Project配下には、特定の場所でのみ使うスタイルを定義します。

典型例としては、ブログの記事デザインやプロフィールなど。

.p-article {
  // 記事のデザインを定義する
}

Layoutの要素について、細かくスタイルを定義したい場合も、こちらにファイルを追加します。

.p-header {
 // ヘッダーの細かいスタイル。背景など
}

Utility配下の中身

Utilityの配下には、補助として使うちょっとしたスタイルを定義しておきます。

例えば、特定の場所に余白を付け足したい場合などに作成します。

.u-margin {
  &--b {
    &10 {
      // u-margin--b10で呼び出せる
      margin-bottom: 10px;
    }
  }
}

global.scssの中身

global.scssで、ファイル分割したスタイルを全て読み込みます。

global.scssの中身は下記のようになります。

//* =======================================================
//* Foundation
//* =======================================================
@use './Foundation/reset';
@use './Foundation/base';
//* =======================================================
//* Layout
//* =======================================================
@use './Layout/l-wrapper';
.
.
.
//* =======================================================
//* Object
//* =======================================================
//* -------------------------------------------------------
//* Component
//* -------------------------------------------------------
@use './Object/Component/c-button';
.
.
.
//* -------------------------------------------------------
//* Project
//* -------------------------------------------------------
@use './Object/Project/p-article';
.
.
.
//* -------------------------------------------------------
//* Utility
//* -------------------------------------------------------
@use './Object/Utility/u-margin';
.
.
.

このglobal.scssをCSSに変換してHTMLで読み込みます。