CSS Modules の記事読んだ

【React/Vue.js】コンポーネント指向と好相性なCSS Modulesを用いたCSS設計について｜Offers Tech Blog

CSS どうすればいいのか分からんとなっていたので助かります。

そもそも CSS Modules とは

• 「コンポーネント毎に CSS をローカルスコープ化する技術のこと」

• Vue の Scoped CSS とは別
• CSS Modules はクラス毎にユニークな文字列を付与
• Scoped CSS はカスタムデータ属性を付与
  • 親のスタイルが子に継承されてしまう

メリット

• 学習コスト低い(基本的に普通の CSS なので)
• コンポーネント毎にスコープが閉じる
• モダンフロントエンドでの採用のしやすさ
• CSS in JS と比べてパフォーマンスがいい

デメリット

• JS と CSS でファイルが分離する
• JS で動的に CSS を操作しにくい
• 将来的に非推奨になる可能性(これはまあ全てに言えることかなと思うけど)

仕組み

CSS Modules は、コンポーネント毎に CSS ファイルが別々にコンパイルされるため、BEM などの複雑なクラスセレクタを使わず、シンプルなクラスセレクタを使うことができます。これにより、グローバルスタイルが汚染されないため、意図しないスタイルが適用されるリスクが下がります。

命名規則

従来であれば、BEM のような CSS 設計規則を採用していましたが、CSS Modules では無理して導入する必要はありません。個人的には、CSS Modules における命名は「できるだけ端的且つ名詞」を意識しています。直感的かつメンバー間で共通認識を持ちやすいため、導入コストと運用コストをバランス良く維持できます。

再利用

• composes を使うことでスタイルを共有できる
  • composes: [クラス名];
  • 別ファイルのクラスの場合は、 composes: [クラス名] from './file-path'; でできる

CSS Modules の選定

• 著者の方がいるチームでは Scoped CSS の課題感から CSS Modules を選定したとのこと
• styled-components / emotion / CSS Modules に絞りそこから選定

• 今後デザインシステムを構築していくにあたり、デザイナーとの協業は必須であるという認識だったので、そこを特に重要視して判断しました。

  • デザイナーやバックエンドエンジニアの方々が初見で読みやすいのはやはり CSS in JS ではなく CSS Modules のほうだよなあというのは分かる
  • 再利用性も CSS in JS だと難しそう