今日のメモ : CSS Module、Styled Components
コンポーネント指向のUI設計・構築が実現できるようになると、障壁はCSS。
CSSというのは、ホントにコンポーネント指向に向かない仕様。まず「コンポーネントに閉じて影響を受けない」というのがムリな上、いくらでも上書きできる。
そこでどうするかというと、乱暴に言えば命名規則で自主規制するワケだ。
OOCSS、BEM、SMACSS...いずれにせよ仮想的にコンポーネントを表現しているに過ぎない。
本質的な解決は Web Components なんだろうね。
CSS Module、Styled Components
SPA で 人気のあるコンポーネント指向フレームワークでは、いかにCSSをコンポーネントにパックするかという試行錯誤が進んでいる。
僕が一番ビューを書いた時期ってのは10年くらい前で、どちらかというと、伝統・古典的なアプローチに慣れ切ってるワケで、これらに触れた時は正直たまげた。
なんにせよ、コンポーネント指向を実現するためにクラス名がバッティングすることを避ける工夫が必要なわけなんだけど、多くはハッシュ値を付けたりしている。
このハッシュ値がなんだか気に食わないんだけど（BEM的にするにも美しくない）、これはを廃しても（フォルダ構成などに準じた命名規則などで）スコープはコントロールできそうだ。(create-react-app で言うところの、react-dev-utils/getCSSModuleLocalIdent)
でもやっぱり、なんだか腑に落ちない
と、思ったら、ああ、違和感の理由はこれかな、と思ったり・・・
「スタイルとマークアップを1つのファイルに詰め込むソリューションは悲惨です。」
