Help us understand the problem. What is going on with this article?

CSS設計~FLOU~

More than 1 year has passed since last update.

はじめに

今まで命名規則に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を扱いきれないあなたに

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away