css-modulesを止めようとしている話（具体的な解決編） - saneyuki_s log

BEMでいいじゃん話の続きその2にして, 具体的な解決編. 多分ここが気になる人が多いと思うのでなるべく箇条書きで済ませることにする. 背景 前回書いてた内容をまとめると以下のようになる. 無駄話が多いので前回は読まなくてもいいです. 追記: 前回読んでもらった方がいい気がしてきた. 時間が無い方はいったん飛ばしてくれて構わないのは変わらず. 状況 サービスの初期からwebpackのcss-loader（を用いたcss-modules）を使用していた これは（個人的には好きではないが）そこまでの問題ではなかった stylelintなどの各種のLint機構がそのまま使える上, CSSとUIコンポーネントのコードは分離できていた サービス開始時の鉄火場の中で, cascadingに基づく暗黙的なスタイルの継承を用いて, UI component treeにおいて祖先側が子孫側のスタイルを上書き

[Quramy]

“cascadingに基づく暗黙的なスタイルの継承を用いて, UI component treeにおいて祖先側が子孫側のスタイルを上書きしている” コレを食い止めなられなかったことが致命的であって、BEMかCSS Modulesか、という話はあんまり関係な

[uehaj]

無秩序なCSS Modulesの使用から、秩序あるBEMにしたら、秩序を得た。CSS Modulesはなにも問題ないのでは？

[akabekobeko]

CSS Modules や styled-components は定義を自動的に一意として定義順の問題を回避するものだから、これで問題が起きるのなら手動命名の BEM はより脆弱なのではなかろうか。

[ishiduca]

https://b.hatena.ne.jp/entry/s/saneyukis.hatenablog.com/entry/2019/02/28/022750 から

[Rishatang]

import順序変えるとレイアウト崩れるの地獄すぎる…

[daichirata]

知見だ、具体例助かる。

[manaten]

会社ではcss modules 、 趣味ではbemベースだけど、ルートに全部書いていくのもそれはしんどいので、style-loaderは使い、cssのインポートは他のコンポーネントのインポートより下に記述するという原始的な方法でやってるなあ