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

4807 ワード
CSS scss CSS テキストリンク

概要

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;
    }
  }
}
csh講座
HDU 3893 Drawing Pictures