FLOCSSによるCSS設計について

Question

FLOCSSによるCSS設計について

FLOCSSを使っているのですが、
ドロワーメニューにもフッター、ヘッダーにもsocial-btnがあり、かつドロワーメニューのみ色が違う場合
social-btnのCSSをどう書きますか？

compornentのsocial-btnにsnsボタンのCSSをすべて書き、
色見の違いはutilityにcolorwhiteを設置しマルチクラスでしょうか？

ただそうするとdrawermenu特有のsocial-btnに当たっているCSSはどこにどのように配置しますか？
social-btnのCSSにすべて記載しますか？（再利用の際drawermenuがないサイトの場合、そこのみ削除して対処しますか？)

それともdrawermenu.cssにdrawermenu特有のsocial-btnに当たっているCSSだけは記載しますか？
（こちらは読み込まなければOKですよね。）

・
また、
layoutのdrawermenu上に記載したところ下にあるcompornent内のsocial-btnのcolorに負けるので、
下記のように強引に詳細度を上げないと当たりません。
そのような場合どのように詳細度をあげますか？
ないしはどのように対処しますか？

.drawermenu__social-btn.drawermenu__social-btn {
color: white;
}

Answer 1

flocssのことは正直よくわかりませんが、
素直に考えれば

.social-btn {
  /*基本のソーシャルボタンのスタイル定義*/
}
.drawermenu .social-btn {
  color: white; /*ドワロー内だけの例外*/
}

これで済む話ですよね。
最初から全てのパターンが出揃っていることは少ないかと思いますので、
ドロワーの中のソーシャルボタン色違いはひとまず .drawermenu内のみの例外としておき、
のちのちソーシャルボタンの色違いが複数必要な仕様であることが分かったら、色違い用のclassを
別途設けて最適化すればよいのでは？
flocssによる設計として上記の考え方が正しいのかどうかはぶっちゃけ私にはよくわからないので
あまり参考にはならないかもしれませんが（苦笑）

あとflocssはOOCSSやBEMと比較するとそれほどメジャーな設計手法ではないので、
実際の業務でバリバリ運用に使っている方は少ない（ヘタしたらほとんどいない）のが現実だと思います。
なので、ここでflocssでの設計思想に限定して質問してもなかなか適切な回答は得られないのではないかと思います。

幸いにも提唱されている方は日本の方なので、設計思想の細かい所がどうしても知りたいなら、
ご本人に直接聞くのが一番良いと思いますよ。。。

Comments

[退会済みユーザー]

flocssはそんなにマイナーなのですね。CSS設計の教科書は有名なのに、
flocssを極めてもあまり評価されなそうですね。

＞＞＞
.social-btn {
/*基本のソーシャルボタンのスタイル定義*/
}
.drawermenu .social-btn {
color: white; /*ドワロー内だけの例外*/
}

つまりdrawermenu.cssとsocial-btn.cssに別々に分けるとやはり管理が複雑になるので、
一つのファイルにまとめるということですね。

谷さんに聞いても答えてくれないんですよね。
確かにもっと詳細を記載してほしいです。