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

flocssについてまとめてみた

More than 1 year has passed since last update.

flocssについてまとめてみた

最近flocssを触っているのでいいタイミングだと思い今回まとめてみました。

flocssとは

cssの設計思想の一つで、OOCSS、SMACSS、BEMなどのコンセプトが取り入れられています。

cssでありがちなこと

基本原則

flocssでは次のようなレイヤーで構成されます。

- css/
    - foundation
    - layout
    - object
        - component
        - project
        - Utility

foundation

ブラウザのデフォルトスタイルの初期化(Reset.cssやNormalize.cssなど)や、プロジェクトにおける基本的なスタイルを定義をする場所。

layout

header,footer,メインコンテンツなどのページを構成する大枠の部分を指定する場所。
基本的にはページ内で唯一の存在になるのでIDを使用するのも可能だが、IDセレクタは高い詳細度を持つため、
接頭辞(l-◯◯など)をつけた命名規則を採用するか,[id="header"]のように属性セレクタを使用することが推奨されている。

object

OOCSSのコンセプトを元に、プロジェクトで繰り返されるビジュアルパターンをすべてObjectと定義します。

  • FLOCSSでのObjectは次のレイヤーに分けられます。

component

再利用できる小さな単位のモジュールを定義する場所。
※最低限の機能を持つものとして定義され、それ自体が固有の幅や色などを持つことは避けるべき。

project

プロジェクト固有のパターンで、いくつかのcomponentだったり、それに該当しない要素で構成されるもの定義する場所。

utility

projectやcomponentをむやみやたらに増やさないように
細かいスタイル調整の便利なクラスなどを定義する場所。

例えば、component間のmarginやpaddingの調整など。

命名規則

命名規則はBEMから派生したMindBEMdingを採用しています。
Block、Element、Modifierを略してBEMと言います。
Blockは大枠、Elementは大枠内のパーツ()、Modifierは大枠、または大枠内のパーツの状態が違うとき。
軽く説明するとこんな感じです。

component

接頭辞としてc-をつけます。

project

接頭辞としてp-をつけます。

utility

接頭辞としてu-をつけます。

カスケーディングと詳細度

モジュール間の上書きや、他のモジュールを親とする上書きは原則禁止になっています。

.c-box {}
.c-button {}
.c-box .c-button {} //これはだめ
.p-mypage {}
.p-mypage .p-boxList {} //これはだめ

ただし、projectからcomponentモジュールは変更できます。

.c-button {}
.p-mypage .c-button {}

まとめ

bem周りは割と適当に書いてしまいましたが、別記事で書いてあるのでぜひ。↓
https://qiita.com/w-tdon/items/681d46e4b0d018ca54ff

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