FLOCSSについて調べてみた

FLOCSS(フロックス)はCSSの設計手法の一つで、OOCSSやSMACSS、BEMなどのコンセプトが取り入れられています。
今回はFLOCSSの考え方や使い方について調べてみたのでメモ。

基本原則

FLOCSSでは以下のようなレイヤーによって構成されています。

  • Foundation
  • Layout
  • Object
    • Component
    • Project
    • Utility

読み込む順番も上のFoundationから順々に読み込むようにする必要があります。
 

Foundation

reset.cssやnormalize.cssなどのような、サイト全体で適用される各要素のリセットを行います。
そのプロジェクト用の基本的なスタイルもここで指定します。
 

Layout

ヘッダーやフッター、メインコンテンツエリア、サイドバーなどのページを構成するレイアウトパーツを指定します。
基本的にはページ内で単一の存在となるため、IDを使うことが推奨されています。
 

Object

プロジェクトで繰り返されるパターンを指定します。
 

Component

汎用性が高く、再利用可能なモジュールを指定します。
プレフィックスで「c-」をつけるようにします。
 

Project

プロジェクト内での固有のパターンを指定します。
プレフィックスで「p-」をつけるようにします。
 

Utility

細かくスタイル調整を行いたいときのヘルパークラスなどを指定します。
プレフィックスで「u-」をつけるようにします。
 

命名規則

命名規則はBEMから派生したMindBEMdingを使用しています。

JavaScriptで操作されている状態を表すModifierは、プレフィックスで「is-」をつけるようにします。

HTML

<button class="c-button is-active">Save</button>

CSS

.c-button {}
.c-button.is-active {}

.is-active単体にスタイルを指定すると、他のモジュールで.is-activeを使用している場合に汚染してしまうため、禁止になっています。

またObject内のレイヤーにも、役割を明確にするためプレフィックスをつけるようにします。

  • Component: 「c-」
  • Project: 「p-」
  • Utility: 「u-」

 

上書きと詳細度

モジュール間の上書きや、他のモジュールを親とする上書きは原則禁止になっています。

CSS

.c-dialog {}
.c-button {}
.c-dialog .c-button {}
.p-comments {}
.p-articles .p-comments {}

例外として、ProjectからComponentモジュールを変更することはできます。

HTML

<div class="p-user-list c-grid">
	<div class="c-grid__item">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}

.p-user-list {}
.p-user-list > .c-grid__item {}

ただし、以下のようにProjectのElementを指定するか、ComponentのModifierを指定して解決できる場合があります。

ProjectのElementを指定する場合

HTML

<div class="p-user-list c-grid">
	<div class="p-user-list__item c-grid__item">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}

.p-user-list {}
.p-user-list__item {}

 

ComponentのModifierを指定する場合

HTML

<div class="p-user-list c-grid">
	<div class="c-grid__item c-grid__item--user">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}
.c-grid__item--user {}

.p-user-list {}

この対応方法の場合だと、詳細度を上げてしまうのを防ぐことができます。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031