はじめに
ウェブサイトが大規模化するにつれ、CSSの管理が課題となってきました。FLOCSSは、そうした問題を解決するためのCSS設計手法として注目されています。本記事では、FLOCSSの概要、構造、命名規則などの重要ポイントを解説します。
FLOCSSとは
FLOCSSは、Flat Object Component Separated Structureの略称で、日本人のデザイナーである森野佑紀氏が提唱したCSS設計手法です。大規模なウェブサイトにおいてCSSを管理しやすくするため、ディレクトリ構造やクラス名に一定のルールを設けています。
FLOCSSの特徴
FLOCSSの大きな特徴は、以下の3点です。
- オブジェクト指向的な設計思想に基づいている
- ディレクトリ構造がフラットで分かりやすい
- BEMに基づいたクラス命名規則を採用している
オブジェクト指向的な設計思想により、コンポーネントの再利用性が高まります。また、フラットなディレクトリ構造とBEMに基づいたクラス命名規則により、どのCSSがどの要素に対応するかが一目でわかるようになります。
FLOCSSの歴史
FLOCSSは2010年頃に提唱された比較的新しい設計手法です。その前身となる考え方は、OOCSSやSMACSS、BEMといった設計手法にさかのぼります。FLOCSSは、これらの手法の長所を取り入れつつ、日本人の視点から改良を重ねた結果誕生しました。
当初は主流ではありませんでしたが、大規模サイトの需要が高まるにつれ、メリットが注目されるようになりました。現在ではさまざまな有名企業やサービスでFLOCSSが採用されています。
FLOCSSの構造
FLOCSSでは、CSSをいくつかのレイヤーに分けて管理します。各レイヤーには特定の役割が与えられており、設計の一貫性を保つことができます。
Foundation
サイト全体に適用されるベースとなるスタイルを定義します。リセットCSSや、タイポグラフィ、カラーパレットなどが含まれます。
| ファイル名 | 説明 |
|---|---|
| _reset.scss | ブラウザ間の表示の違いをリセットするスタイル |
| _typography.scss | フォントやサイズ、行間などのタイポグラフィ設定 |
| _colors.scss | サイトで使用する色のパレット |
Foundationレイヤーでは、サイト全体で使用される基本的なスタイルを定義します。各ファイルは、機能単位でスタイルを切り分けることで、メンテナンス性とコード可読性を高めています。
Layout
ヘッダー、フッター、メインコンテンツエリアなど、ページのレイアウトを構成する要素についてスタイルを定義します。
- .l-header {}
- .l-main {}
- .l-sidebar {}
- .l-footer {}
Layoutレイヤーでは、ページの骨格となる要素をスタイリングしています。クラス名の先頭に「l-」というプレフィックスが付与されることで、レイアウト要素であることが一目でわかります。
レスポンシブデザインの場合は、メディアクエリを用いてレイアウトの切り替えを行うことができます。
“`css
.l-main {
width: 70%;
}
@media screen and (max-width: 768px) {
.l-main {
width: 100%;
}
}
“`
Object
Objectレイヤーは、さらにComponent、Project、Utilityの3つのサブレイヤーに分かれています。
Component
ヘッダーのロゴ、メインナビゲーション、検索フォームなど、ページを構成する再利用可能な小さなパーツに関するスタイルを定義します。
“`scss
.c-logo {
width: 200px;
}
.c-nav {
&__item {
display: inline-block;
margin-right: 10px;
}
}
“`
ComponentにはCSSの設計の中核となるパーツが含まれるため、再利用性の高い洗練されたコーディングが求められます。クラス名の先頭には「c-」というプレフィックスが付与されます。
Project
特定のページに固有のスタイルを定義します。Componentとの大きな違いは、Projectでは単発的かつ具体的なスタイリングがおこなわれる点です。
“`css
.p-home-hero {
height: 500px;
background: url(../images/hero.jpg) no-repeat center / cover;
}
“`
クラス名の先頭には「p-」というプレフィックスが付与されます。Projectでは、再利用性よりも個別の要件に合わせたスタイリングが重視されます。
Utility
レイアウトやデザインに関わらず、一般的に使用される便利なスタイルをまとめたレイヤーです。余白やフロート解除、テキスト配置などのヘルパークラスが定義されます。
“`css
.u-clearfix::after {
content: “”;
display: table;
clear: both;
}
.u-text-center {
text-align: center;
}
“`
クラス名の先頭には「u-」というプレフィックスが付与されます。Utilityは、コンポーネントやプロジェクトごとに同じスタイルを定義する必要がなくなるため、コードの重複を防ぐことができます。
FLOCSSの命名規則
FLOCSSでは、BEMに基づいたクラス命名規則を採用しています。BEMとは、Block、Element、Modifierの略称で、オブジェクト指向的な命名規則です。
Block
Blockは、独立したコンポーネントの最上位の要素を表します。メインナビゲーションやボタン、アコーディオンメニューなどが該当します。
- .c-nav
- .c-button
- .c-accordion
クラス名の先頭にプレフィックス「c-」を付与することで、ComponentレイヤーのBlockであることを示しています。Blockは常に単数形で記述します。
Element
Elementは、Blockの子要素を表します。メインナビゲーションのリンクやアコーディオンメニューの開閉ボタンなどが該当します。
“`html
“`
Elementのクラス名は、2つの続くアンダースコア（__）でBlockと区切ります。複数の単語が続く場合は、ケバブケース（-）で単語を区切ります。
Modifier
Modifierは、BlockまたはElementに対する状態や見た目の変更を表します。例えば、メインナビゲーションで現在のリンクをハイライト表示する場合などに使用されます。
“`html
“`
Modifierのクラス名は、2つのハイフン（–）でBlockまたはElementと区切ります。複数の単語が続く場合は、ケバブケース（-）で単語を区切ります。
jSプレフィックス
JavaScriptで操作する要素には、「js-」というプレフィックスを付与することが推奨されています。
“`html
“`
JavaScriptからは「js-toggle-menu」というクラス名で要素を取得することになります。このようにjSプレフィックスを使うことで、JavaScriptとCSSの役割を明確に分離することができます。
まとめ
本記事では、FLOCSSの概要、構造、命名規則について詳しく解説しました。FLOCSSは、レイヤー分けとBEMに基づく命名規則により、大規模サイトでもCSSを体系的に管理することができます。初心者にとっては若干取っつきにくい面もありますが、設計思想を理解し実践を重ねることで、保守性の高いコーディングが可能になります。
CSSの設計手法は様々ありますが、FLOCSSはその中でも特に注目されている手法の一つです。プロジェクトの規模や要件に合わせて、最適な手法を選択することが重要です。
