みんなが知ってるような
知らないようなFLOCSSの話
@hiloki
Scroll 👉
FLOCSSのこと
- Foundation
- Reset/NormalizeやVariablesなど
- Layout
- ページのストラクチャや、レイアウトモジュール
- Object/Component
- Buttonなどのプリミティブなモジュール
- Object/Project
- プロジェクト固有、Componentより抽象度の低いモジュール
- Object/Utility
- 単一の機能を持つヘルパーモジュール
FLOCSSにまつわる
いくつかのトピック
- Layoutの役割 ★
- ComponentとProjectの違い
- レイヤールールの利点
- FLOCSSコンポーネント設計パターン
- UIデザインとFLOCSS
- etc.
⚠️おことわり
あくまで作者自身による再解釈であり、
すべてのケースにおいて正しいとは限りません
FLOCSS
「レイアウト」という言葉の曖昧さ
- ヘッダーやメイン、フッターなどのストラクチャ？
- レイアウトの機能を持つコンポーネント？
- 細かい余白調整のヘルパー？
ストラクチャとしてのLayout
- FLOCSSとしての解釈に近いのはこれ
- 「Headerとか悩ましくない？」
- 結論：レイアウトとしてのHeaderと
機能を持ったモジュールとしてのHeaderをわける
THE LOGO
<header class="l-header"> <div class="p-header"> <h1 class="p-header__logo">THE LOGO</h1> <nav class="p-header__nav"> <ul class="p-nav"> <!-- ... --> </ul> </nav> </div> </header>
.l-header { max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; }
.p-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; background-color: #fff; border: 1px solid #000; }
ストラクチャとしてのLayout
- 結論：レイアウトとしてのHeaderと
機能を持ったモジュールとしてのHeaderをわける - Layoutが何もスタイルを
持たないこともある - けど個人的にはclassをつけておく
コンテンツの性質を表しているから
レイアウトの機能を持つ
モジュール
- Gridなど、FLOCSS公式では
Componentという説明をしてるが
Layoutでもいいかも - サイドバーのモジュール間の余白を制御するやつとか
<div class="l-sidebar"> <div class="l-sideModule"> <div class="p-module">...</div> </div> <div class="l-sideModule"> <div class="p-module">...</div> </div> <div class="l-sideModule"> <div class="p-module">...</div> </div> </div>
.l-sideModule { margin-bottom: 24px; }
レイアウトの機能を持つ
モジュール
- UIデザインのルール、パターンがあるなら可能
「カンプから読み取る」のではなく、
「デザインされているか」どうか
細かい余白調整のヘルパー
よくある `margin-bottom` だけの機能
FLOCSS的にはUtilityだが、
レイアウトと再定義したっていい（有用なら）
（と、講演時に話しましたが、おすすめはしません）- いっそ `.l-spacer` という
spacer.gifみたいな
モジュールがあってもいいかもしれない
<div class="l-spacer-tbMd"></div> <div class="l-spacer-tLg"></div>
.l-spacer-tbMd { /* top, bottom, Medium:16px */ margin-top: 16px; margin-bottom: 16px; } .l-spacer-tLg { /* top, Large:24px */ margin-top: 24px; }
Div多くない？
- 愚直にFLOCSSを使うとdivが増えやすくなる
コンポーネントの責務を切り分けた結果、
必要となるdivは、無駄ではない - 増え続けていい、という意味はない
どこかでリファクタリングは必要
他のトピックについては
10.08 技術書典#5 で販売します
サークル名: マメヒコファンクラブ
Arigato!