FLOCSS設計ってどんなんだっけ？となった時に思い出せる簡単なメモ

概要

Found Layout Object CSSの略で、OOCSSやBEM、SMACSSの流れを受けて考案されたCSS設計思想

FLOCSS

Foundation

• サイト全体のデフォルトスタイルを定義する
• _reset.scss, _base.scss, _mixin.scss, _variables.scss

Layout

• Objectの配置を決める
• ページ単位で唯一の存在になるのでidセレクタを使う
• 構造に関わる部分でProjectごとの整列用にflexやfloat解除につかったり、sitewidthを定義したりする程度の記述
• _header.scss, _sidebar.scss, _footer.scss

Object

• Component
  • 再利用可能なパーツ
  • プレフィックスにc-をつける（.c-btn, .c-btn_primary)
• Project
  • Componentにするほどでもないパーツ(個々のページの中でしか使わない、１回しか使わないなど)
  • プレフィックスにp-をつける（.p-article, .p-article__title)
• Utility
  • 汎用クラスで単一のスタイルを持つ
  • プレフィックスにu-をつける（.u-clearfix, .u-block)

命名規則ではBEMと同じ規則が用いられている

ディレクトリ構成

FLOのそれぞれの構造に合わせ、ディレクトリ構造も分割することでメンテナンスしやすくなる

css
|-- foundation
|   |-- _base.scss
|   |-- _reset.scss
|-- layout
|   |-- _main.scss
|   |-- _sidebar.scss
|-- object
    |-- component
    |   |-- _button.scss
    |   |-- _grid.scss
    |-- component 
    |   |-- _articles.scss
    |   |-- _profile.scss
    |-- component 
        |-- _clearfix.scss
        |-- _margin.scss
        |-- _text.scss

例

sample.html

<!-- flocss.html -->
<h1>FLOCSS</h1>
<!-- 以下、layout idセレクタを使う -->
<div id="countainer">
  <!-- 以下、component(module) c-を使う -->
  <ul class="c-menu">
  　　<!-- FLOCSSではmodifierをつける時マルチクラスパターンを基本とする -->
    <li class="c-menu__item c-menu__item--large">link</li>
    <li class="c-menu__item c-menu__item--active">active</li>
  </ul>
</div>

style.scss

.c-menu {
  list-style-type: none;
  &__item {
    width: 80px;
    margin-bottom: 5px;
    color: #4486F7;
    border: 1px solid #4486F7;
    text-align: center;
    &--large {
      width: 100px;
    }
    &--active {
      color: #fff;
      background-color: #4486F7;
    }
  }
}