CSS設計~FLOU~

#はじめに
今まで命名規則にBEMを取り入れていました。ただ、scssファイルの分割等まではしておらず、、、。
それではいけないと、再度CSS設計を調べたのですが、何がいいのかわからず。　
現状のBEM思想をキープしながらFLOCSSのいいとこ取りをしているFLOUというものを教えてもらったので、備忘録です。

FLOUとは

FLOCSSのいいとこ取りをして、よりスマートな設計が可能なCSS設計手法の1つ。

FLOCSSとは

Foundation,Layout,Object(Component,Project,Utility)というレイヤーに分割することができ、これらに沿ってCSSを分類して書いていくCSS設計手法です。　
FLOCSSを使うことで　
・cssがコンポーネント化されるので、使い回したり修正をしたりしやすい
・MindBEMdingのネーミングルールによってクラスの役割を明確化できる
というメリットを得ることができる。
その一方で、どのレイヤーに記述すればいいのか混乱してしまい、メリットを存分に生かせないこともある。
このような混乱が少しでも減るようにと、FLOCSSのいいとこ取りをした、FLOUができた。

FLOCSSとは

FLOUの設計

Foundation,Layout,Object,Utilityの4レイヤーで構成される。

1.Foundation
reset.cssなどのブラウザデフォルトスタイルの初期化、ページのベーススタイル用のクラス。基本的にコードは追加しない。
foundation.scssに記述する。

2.Layout
要素の配置や、幅や高さを指定するクラス。それぞれの要素固有のスタイルを記述する。このレイヤーが一番更新度高い。
layout.scssに記述する。

3.Object
複数ページで使われる要素を定義するクラス。要素内で常に同様の振る舞いをするものに関してのみスタイルを定義する。
object.scssに記述する。

4.Utility
調整用のクラス。margin,padding,font-size,colorなど、細かい調整に必要なものに使用する。
utility.scssに記述する。

それぞれのクラスで記述したscssをstyle.scssでimportする。

ディレクトリ構造

scss
├── _foundation.scss
├── _layout.scss
├── _utility.scss
└── style.scss

終わりに

スマートなCSS設計の正解は人それぞれ、作りたいものそれぞれだと思います。
この設計以外にスマートで使いやすい設計方法をご存知の方は教えていただければと思います。

###参考
FLOCSSを扱いきれないあなたに