概要
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セレクタを使う --><divid="countainer"><!-- 以下、component(module) c-を使う --><ulclass="c-menu"> <!-- FLOCSSではmodifierをつける時マルチクラスパターンを基本とする --><liclass="c-menu__item c-menu__item--large">link</li><liclass="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:1pxsolid#4486F7;text-align:center;&--large{width:100px;}&--active{color:#fff;background-color:#4486F7;}}}