夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

FLOCSSベースのサイト設計 - 破綻しないルールを決める

FLOCSSベースのサイト設計

サイトを効率的に作成していくにはファイルの管理方法や、クラスの命名規則など、統一されたルールが必要です。今回は自分なりのFLOCSSを含めたサイト設計について説明します。

説明する前提条件は以下。

  • あくまで個人的なルール。今後変更する可能性があり。
  • 複数ページあるサイトに適用する。
  • FLOCSSを自分流にカスタマイズしている。
  • Sassを使う。
この記事の目次

FLOCSSのクラス名のつけ方

最初にクラス名のルールについて説明します。
基本的にはBEM設計と同じでBlock、Element、Modifierに分けて名前をつけます。FLOCSSではさらにクラス名の先頭に接頭辞（l-、c-、p-、u-）をつけて管理するというもの。

以下は公式です。

参考
BEM公式
github
参考
FLOCSS公式
github

基本となるBEM設計について

BlockとElementはアンダーバー２つ、ElementとModifierはハイフン２つで管理します。アンダーバー１つや大文字を使ったキャメルケース系のクラス名は使いません。以下の例ではheader（Block）、inner（Element）、center（Modifier）になります。

例）
header__inner--center

クラス名が長くなってしまう場合はハイフン１つで繋ぎます。以下の例だとlogo-setで１つのElementになります。

例）
header__logo-set

またElementからElementと繋げることは禁止です。必ずBlockから直接繋がっている必要があります。Modifierは直接ブロックにも繋がることができます。

例）
NG：header__inner__ttl
OK：header__ttl

接頭辞（プレフィックス）をつける

用途にあわせてクラス名に接頭辞をつけます。どのように接頭辞をつけるかは後ほど説明します。

  • layout（大枠のレイアウト） … l-
  • component（最小単位のパーツ） … c-
  • project（ページごとのモジュール） … p-
  • unility（調整用） … u-

Sassファイルの管理方法

以下はFLOCSSをベースにしたSassファイルの管理方法です。Objectのフォルダを削除して、自分用にカスタマイズしています。

|_sass/
   |- setting/（変数$を管理する）
   |   |- _color.scss
   |   |- _font-family.scss
   |   |- _z-index.scss
   |   |- …
   |   
   |- foundation/（基本の設定）
   |   |- _base.scss
   |   |- _ress.scss（リセットCSS）
   |   |- …
   |
   |- layout/（レイアウト部分の管理）
   |   |- _l-header.scss
   |   |- _l-main.scss
   |   |- _l-footer.scss
   |   |- _l-sidebar.scss
   |   |- …
   |
   |- component/（最小単位のパーツ）
   |   |- _c-btn.scss
   |   |- _c-link.scss
   |   |- _c-flex.scss
   |   |- …
   |
   |- javascript/（JavaScriptによって操作するもの）
   |   |-_js-trigger.scss
   |   |-_js-target.scss
   |   |- …
   |
   |- project/（各ページのモジュール管理）
   |   |- _p-home-block.scss
   |   |- _p-main-visual.scss
   |   |- …
   |
   |- mixin/（mixinの管理）
   |   |- _breakpoint.scss
   |   |- _animate.scss   
   |   |- …
   |
   |- utility/（調整用）
   |   |- _u-invisible-sp.scss
   |   |- …
   |
   |- style.scss

Sassフォルダの中を役割ごとに７つのフォルダに分けて管理しています。それぞれのフォルダの役割について説明します。

setting（変数$を管理する）

setting/（変数$を管理する）
   |- _color.scss
   |- _font.scss
   |- _z-index.scss
   |- ……

サイト内に使われる変数$を一括して管理するフォルダです。変更が起こりやすい色やフォントの種類など、ファイルを分けて変数でまとめておきます。

例えば色については_color.scssを作成して以下のように書きます。
使う色と色を使うエリアを変数でまとめておきます。

/*--使う色をまとめる--*/
$palette-red: #F44034; //赤色
$palette-yellow: #FFEC3D; //黄色
$palette-blue: #2094F3; //青色

/*--色を使うエリアをまとめる--*/
$color-global: $palette-red;
$color-global-main: $palette-yellow;
$color-global-sub: $palette-blue;

色の管理については以下の記事が参考になります。

参考
変更に強いSassの色管理プラクティス
note

foundation（基本の設定）

foundation/（基本の設定）
   |- _base.scss
   |- _ress.scss（リセットCSS）

リセットCSSの読み込みと、htmlやbodyなど基本設定をするフォルダです。リセットCSSは好きなものを選んでください。私はress.cssを使っています。

参考
ress.css
github

_base.scssは例は以下です。

html {
  -webkit-text-size-adjust: 100%; 
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
}

body {
  font-family: $font-family;
  line-height: 1.5;
  color: $font-color;
  background-color: $bgcolor;
}

layout（レイアウトの管理）

layout/（レイアウト部分の設定）
   |- _l-header.scss
   |- _l-main.scss
   |- _l-footer.scss
   |- _l-sidebar.scss
   |- ……

サイトの大枠となるレイアウトを管理するフォルダです。具体的にはheader、footer、main、wrapper、sidebarがこれにあたります。クラス名については接頭辞にl-をつけます。

グローバルメニューもheader側で管理しますが、状況によってはprojectフォルダで管理することもできます。

以下はheader部分のクラス名の例です。

クラス名意味・用途
l-headerheader全体
l-header__innerheaderの内側
l-header__logoheader内にあるロゴエリア
l-header__menuグローバルメニューエリア（navの部分）
l-header__listグローバルメニューのul
l-header__itemグローバルメニューのli
……

component（最小単位のパーツ）

component/（最小単位のパーツ）
   |- _c-btn.scss
   |- _c-link.scss
   |- _c-flex.scss
   |- ……

最小単位のパーツはこのフォルダで管理します。例えばボタンやリンクなど細かい単位で使いまわせるものはcomponentになります。クラス名の接頭辞にはc-をつけます。

クラス名の例は以下。

クラス名意味・用途
c-btnボタンの設定
c-linkリンクの設定
c-flexflexboxの設定
c-flex__itemc-flexで横に並べるボックスの１つ
……

javascript（JavaScriptによって操作するもの）

javascript/（JavaScriptによって操作するもの）
   |   |-_js-trigger.scss
   |   |-_js-target.scss
   |   |- …

スクロールアニメーションなどJavascriptによってクラス名を付与して、状態を変化させるものはjavascriptフォルダで管理します。

接頭辞にjs-がついているものはスタイルをつけず、JavaScript側で位置を取得するためだけに使用します。実際にスタイルを指定するのは接頭辞がis-がついたものだけです。

接頭辞is-がついたクラス名は接頭辞js-がついたsassファイルで管理されます。
（単独で_is-show.scssは作らないということ）

クラス名意味・用途
js-triggerJavaScriptで位置を取得する用。スタイルは指定しない。
is-showアニメーションが始まる前の状態
is-show--doneアニメーションが完了した状態
……

project（各ページのモジュール管理）

project/（各ページのモジュール管理）
   |- _p-home-block.scss
   |- _p-main-visual.scss
   |- ……

projectとは、componentの最小限のパーツと、それ以外の要素が組み合わさってできる塊のこと。レイアウト部分でもなく、componentに含まれないものはprojectフォルダで管理します。クラス名には接頭辞にp-をつけます。

projectとcomponentの判断については、以下の記事がわかりやすいです。

参考
FLOCSSを使ったCSS設計での悩みどころと解決案
Qiita

クラス名の例は以下。

クラス名意味・用途
p-home-blockトップのsection部分
p-main-visualトップのメイン画像エリア
p-panel-container複数のブロックを囲うブロック
p-panel横に並べる１つのブロック
……

mixin（mixinの管理）

mixin/（mixinの管理）
  |- _breakpoint.scss
  |- _animate.scss
  |- ……

mixin名ごとにファイルを分けて管理します。

utility（調整用）

utility/（調整用）
  |- _u-invisible-sp.scss
  |- ……

基本的には使いません。FLOCSS公式ではmarginの調整やpaddingの調整などスポット的に使えますが、自由度が高すぎてクラス名をつける迷いの原因になります。

使うところとしては、brなどの改行でSPとPCで表示を切り替えるところや、いまはほとんど使わないclearfixの指定くらいに留めます。

分割したファイルの読み込む

分割したSassファイルをstyle.scssに一括して読み込みます。gulpのパッケージにある「gulp-sass-glob」を使えば簡単に読み込むことができます。読み込む順番を間違えると正しく表示されないので注意しましょう。

@import "setting/**";
@import "mixin/**";
@import "foundation/ress";
@import "foundation/base";
@import "layout/**";
@import "component/**";
@import "javascript/**";
@import "project/**";
@import "utility/**";

gulpの設定については以下の記事に書いたので参考にしてみてください。

gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する

※2021.08.13追記
Sassの@importを使った書き方が2022年10月1日までにサポート終了します。今後は@useと@fowardを使った書き方になりますが、「Live Sass Compiler」は対応していません。対応している拡張機能については以下の記事を参考にしてみてください。

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

サイト全体のルールを決める

FLOCSS設計とあわせて、個人的なルールを紹介しておきます。明確なルールを作ることでコーディングで迷うことがなくなります。

マルチクラスで指定できる

マルチクラスとは、１つの要素に対して複数のクラス名を指定できること。
以下は例になります。

<div class="c-flex c-flex--reverse">

</div>
c-flex{
   display: flex;
}
c-flex--reverse{
  flex-direction: row-reverse;
}

modiferを指定するときに以下のように省略して書く方もいますが、個人的には禁止しています。クラス名が増えたときに、どのブロックのmodiferか判断つかないためです。

<div class="p-panel c-flex -reverse">

</div>

省略を意識しない

FLOCSSではクラス名が長くなること、１つの要素に複数のクラス名がつくことが多くなります。そうなると見にくいという理由で、クラス名をどうにか省略できないか考えてしまい、迷いが生じます。基本はクラス名が長くても、複数指定しても気にしません。

クラス名を省略するためのルールが明確にあれば問題ないですが、場当たり的に省略しないようにします。省略できるクラス名はまとめておくと良いでしょう。

以下は例です。

省略前省略後
categorycat
titlettl
texttxt
……

具体的なクラス名はつけない

例えばwidthを400pxで指定するときに、以下のような具体的なサイズがわかるクラス名をつけないようにします。400pxが変更になったときにクラス名も変える必要が出てくるからです。

<div class="p-container p-container--w400">

</div>

以下のように書くと、数値が変わっても対応できます。サイズを抽象的に指定します。

<div class="p-container p-container--small">

</div>

色についても同じです。例えばクラス名にredとつけてしまうと、赤色から変更したときにクラス名も変える必要があります。その場合はcolor-1のように数字を使って管理します。

<div class="p-block__txt p-block__txt--color-1">

</div>

無理にパーツ化を意識しない

共通部分を見つけて、何でもパーツ化しないこと。パズルのようになってしまいます。パーツ化はデザインカンプがルールを持って設計されていること前提です。「再利用できる」ことが意識できていないならパーツ化する意味がありません。

クラス名はすべてにつける

htmlやbody、imgなど特にクラス名が必要ないものを除き、基本的にはすべてにクラス名をつけます。クラス名をつける必要がない場合でも、>や+などを使って指定箇所を限定します。

ネストしない

Sassでは入れ子（ネスト）で書くことで、クラス名を省略することができますが、基本的にはネストで書きません。可読性が下がってしまうこと、それから検索したいクラス名がすぐに探せないことが理由です。

JavaScriptで操作するクラス名のつけ方

スクロールアニメーションなどJavascriptを使ってクラス名をつける場合は、ターゲットとなる要素には接頭辞にjs-をつけて、実際にスタイルをあてる要素にはis-をつけます。

js-がついているものにはスタイルはあてません。位置の取得など、JavaScript側で操作するためのクラス名です。

<div class="p-panel js-trigger is-show">

</div>

is-showではアニメーション開始前の状態を指定しています。特定の位置にきたときにJavaScript側でis-show--doneのクラス名を付与させてアニメーションさせます。

接頭辞is-だけでスタイルは指定せず、接頭辞js-と一緒に指定します。

.js-trigger.is-show{ //アニメーション開始前の状態
   opacity: 0;
   transition: opacity 0.3s ease;
}

.js-trigger.is-show--done{ //アニメーション後の状態
   opacity: 1;
}

画像の管理について

images
  |- common/ 共通の画像
  |- about/  aboutページの画像
  |- works/  worksページの画像
  |- ……

画像についてはimagesフォルダに各ページ名のフォルダを作成して、その中で画像を管理します。各ページ共通の画像はcommonフォルダで管理。画像の種類によってttl-やimg-など最初につける名前を決めておきます。

以下は画像名の例です。

種類ファイル名
タイトル画像ttl-【名前】-01.jpg
写真やイラスト画像img-【名前】-01.jpg
アイコン画像icon-【名前】-01.jpg
……

marginのつける方向

基本は親要素のpaddingで余白をとります。それでも余白をとるのが難しい場合は子要素のmargin-topとmargin-leftで対応。

詳しい説明については以下。

参考
フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方）
Qiita

FLOCSSを使っている参考サイト

FLOCSSを明確に使っているサイトは少ないですが、baigieさんが制作するサイトはとても参考になります。

またEVOWORXさんが制作しているサイトもFLOCSSで作成されています。

さいごに

今回は個人的に考えたFLOCSSベースのサイト設計について紹介しました。最初はSassファイルをできるだけ分割せず、クラス名も省略して、使いまわせるブロックをたくさん作るにはどうすれば良いかを考えていましたが、良いCSS設計と言われる以下の４つを考えると、そのすべてを満たすのは難しいことが分かりました。

  • 予測できる
  • 再利用できる
  • 保守できる
  • 拡張できる

コーディングで一番フラストレーションがたまるのは「迷う」こと。どのブロックで管理して、どんなクラス名をつけるのか。こういった迷いを無くすために、自分なりのルールを決めて、それを守ることが大切になります。

FLOCSSのサイト設計について、以下の記事がとても参考になりました。

参考
SCSSのファイル設計（BEM設計からFLOCSS設計に）
吉本式 Web制作のコーディングガイドライン

こちらの記事も読まれています