flocssのメモ

書いていくほどに苦しめてくるのが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
残りの枝葉末節パーツたちは、以下３つの子レイヤーに分類。

####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を使ってみる。