概要

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;
    }
  }
}