みんなが知ってるような
知らないようなFLOCSSの話

@hiloki

Scroll 👉

Twitterのアバター画像

谷 拓樹 @hiloki

  • 株式会社サイバーエージェント所属(採用してるぞ!
  • FLOCSSの作者, CSS設計の教科書(緑の本)の著者
  • コーヒーと柴犬(マメヒコ)を嗜んでいる
  • FLOCSSは2014に公開したCSSの構成案・設計手法
  • SMACSSのようにモジュールを分類して、責務を切り分け
  • BEMの思想を取り入れたセレクタ設計、命名規則を採用
  • MCSSのようなカテゴライズ(レイヤー)間のルールを持つ
Foundation
Reset/NormalizeやVariablesなど
Layout
ページのストラクチャや、レイアウトモジュール
Object/Component
Buttonなどのプリミティブなモジュール
Object/Project
プロジェクト固有、Componentより抽象度の低いモジュール
Object/Utility
単一の機能を持つヘルパーモジュール
FLOCSSが導入されている様子のサイトたち
FLOCSSのREADME.mdしかないリポジトリ

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は、無駄ではない
  • 増え続けていい、という意味はない
    どこかでリファクタリングは必要

他のトピックについては

柴犬でもわかるFLOCSS

10.08 技術書典#5 で販売します

サークル名: マメヒコファンクラブ

誕生日のマメヒコ

Arigato!