LoginSignup
4

More than 5 years have passed since last update.

flocssのメモ

Posted at

書いていくほどに苦しめてくるのがCSSだったので、これは設計手法を学ぼうと思ってあれこれ探した結果、flocssというものに当たり、整理の意味も含めてメモ。全然違うこと書いてるかもしれません、ごめんなさいin advance。

flocssとは

なにはともあれ、ドキュメント。
hiloki/flocss: CSS organization methodology.
OOCSSやSMACSSなどの影響を受けている。日本人のhirokiさんが発案らしい。

CSSを設計する際に、ざっくりと以下のような構成にする。

|---foundation
|---layout
└---object
    |---component
    |---project
    └---utility

3レイヤーに分けて、構造を分離しつつ、メンテナンス性、生産性、可読性を高めるというメリットが合わさって最強に見えるというもの。componentニキが強い。

foundation

resetやnormalizeの役割を持つcssを分類する。

layout

ざっくりとしたワイヤーフレームまでの構成要素を記述する。

object

残りの枝葉末節パーツたちは、以下3つの子レイヤーに分類。

component

使い回しの効くパーツが分類される。
ボタンやテキストのようなgeneralなものから、カルーセルやテーブルデザインのような自前のものなど、複数箇所で使い回したいものがそれに当たる。

project

project毎のcssが分類される。
最初はなんのこっちゃわからなくて、ウーンとなっていたけど、どうも最終的なviewとなるものの仕上げをするというような感覚ぽい。padding/margin、color系などはここで決めておくと、他がスッキリして全体としての使い回し性が上がるのかも。

utility

汎用的な機能を持ったクラスが分類される。
例えばmarginの微調整や、jsを元にした見た目の変更、変数まとめなど。

作成メモ

prefixについて

どのレイヤーに属しているかわかるようににprefixをつけて置くと可読性がグーンする。
.l => layout
.c => component
.p => project
.js => jsにかかわるもの

カスケーディングについて

カスケーディングは原則しない。なぜならやたらめったらのカスケーディングこそが後々の運用を苦しめているから。
派生したクラスを作りたい場合は、そのクラスそのものには要素を持たせず、名前を命名規則に基づいて拡張し、擬似的に作成する。必要に応じて@extendしたり。
例:

.c-button{
  padding: 0.5rem 1rem;
  background-color: #eee;
  font-size: 1rem;
  color: #333;
}
.c-button--big{
  @extend .c-button;
  padding: 1rem 2rem;
  font-size: 2rem;
}

命名規則について

MindBEMdingという命名規則を推奨している。
フォーマット:
.prefix-classname--modifier__element

例:

.c-button--big
.p-headliner__title

thoughts

jsで扱われるクラスの分類について

modalなど汎用的なもので、かつjsと切っても切り離せないものをどこに置くか悩んだ。
一応上で書いている通りutilityに入れたけど、どちらかというと分類的にcomponentに置きたかった気がする。

延々と伸びていくクラス名

多分抽象化がうまくできていないんだと思うけど、例えばちょっとネストしたcomponentを作っている時に、結構簡単にクラス名が伸びていってしまう。

.c-card-history{
  &__card-box {
    &--left {
      .user-img{
      }
    }
    &--main {
      &__description {
        &__header {
        }
        &__body {
        }
      }
    }
  }
}

例えば↑のようなものがあって、descriptionのbodyをviewに付与したい時のクラス名は・・・
.c-card-history__card-box--main__description__body
となる・・・ウーン
パッと見てわかりやすいけど。

反省

neatやbourbonを使ってみる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4