Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はてなにおける CSS Modules、及び CSS Modules に足りないもの / CS...

はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts

BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。

mizdra

April 19, 2024
Tweet

More Decks by mizdra

Other Decks in Programming

Transcript

  1. CSS Modules とは • CSS をローカルスコープ化する仕組み • CSS はグローバルスコープ ◦

    .foo { .. } はページ内全ての .foo に適用される • CSS Modules を使うと... ◦ 特定のコンポーネントの .foo にだけ適用できる 4
  2. はてなのフロントエンド 8 • 社内の一般的な技術スタック ◦ View ライブラリ: React ◦ CSS

    フレームワーク: CSS Modules • 最近は CSS-in-JS / Utility-first が流行りだけど... ◦ はてな社内では、CSS Modules を使ってる
  3. なぜ CSS Modules? 9 • 大きな理由は2つ • 理由1: 導入が簡単 ◦

    xxx.module.css を作成 & import するだけ ◦ CSS-in-JS などと違い、ビルドツール組み込みでサポート ▪ ビルドツールの設定を書かなくて OK
  4. なぜ CSS Modules? 10 • 理由2: 生の CSS に近い感覚で書ける ◦

    fontSize じゃなくて font-size で OK ◦ Media Queries 使える ◦ .foo, .bar, .baz:hover { .. } も OK • はてなではデザイナーが CSS 書いてる ◦ コーディング経験無い方もいて、入社してから覚えてもらう ◦ CSS Modules なら、取っつきやすい
  5. 導入して困ったこと 13 1. 未使用の CSS 宣言が bundle に含まれる 2. style.unknown

    と書いてもビルドが通る 3. コードジャンプできない
  6. 1. 未使用の CSS 宣言が bundle に含まれる 14 (プロジェクトの構成にもよるが、Next.js だと...) •

    未使用の CSS 宣言は成果物に含まれる *1 • ユーザから隠したつもりが... ◦ devtools で .css を読むと書いてある *1: https://github.com/mizdra/next-unused-css/tree/main/.next/static/css
  7. 解決策 16 • Bundler 側が対応してくれないと、どうにもならない ◦ Webpack, Turbopack, Vite, …

    • ユーザ側でどうにかするしかない ◦ 未使用の CSS 宣言は消す or コメントアウト • 不便だけど、気をつければ OK ◦ 書き方によって bundle に含まれたり、含まれなかったりしない ◦ 良いように捉えると、制御しやすい
  8. 解決策 18 • typed-css-modules ◦ .module.css を解析して、.module.css.d.ts を生成 ◦ tsc

    がそれを見て、型チェック ◦ => 存在しないクラスの参照があったら、tsc がエラーを吐く
  9. typed-css-modules の制限 20 • Scss, Less はサポートしてない ◦ はてなでは、Scss, Less

    どちらも使ってて困った • 調べたところ... ◦ typed-scss-modules, typed-less-modules を発見 ◦ => はてなではこれを導入
  10. 3. コードジャンプできない 21 • .tsx の側から、.css の定義元にジャンプしたい ◦ style.foo を

    Command + Click で .css にジャンプしたい • しかし実際には... ◦ .module.css.d.ts にジャンプしてしまう
  11. VS Code 拡張の制限 24 • VS Code でしか機能しない (それはそう) •

    チームに vimmer が居る ◦ どのエディタでも使える方法が欲しい • けど、そんなものはなかった ◦ なければどうする? ◦ 作ればいいじゃない!
  12. happy-css-modules と Declaration Map 26 • 加えて .module.css.d.ts.map も生成 ◦

    Declaration Map というやつ ◦ .module.css.d.ts => .module.css の対応関係が記録されてる • これを Language Server *2 が読んでくれる ◦ 通常は .module.css.d.ts にジャンプするはずだが... ◦ Declaration Map により、.module.css にジャンプできる! *2: コードジャンプや補完などの補助機能を提供するプログラムのこと。 エディタとは独立していて、様々なエディタと組み合わせられる。 同じ Language Server を使っていれば、どのエディタでも同じ開発体験が得られる。
  13. 実際 CSS Modules どうよ? 32 • いいけれど... • やっぱり開発体験は他の CSS

    フレームワークに劣る ◦ CSS 宣言を利用するコードを探せない (Find all references) ◦ 未使用 CSS 削除できない • JS の中に全てがあることで、できることがある ◦ CSS-in-JS ならではの強み
  14. 仕様がメンテナンスされてない問題 33 • 2015 年を最後に停滞 *2 ◦ CSS Variables のローカルスコープ化の提案などが、進んでない

    *3 • @sokra, @geelen, @markdalgleish が仕様策定してた ◦ 中でも geelen がよく貢献してた ▪ 2016 年から styled-components の開発を開始 ◦ 主要なメンテナが、CSS Modules から離れた *2: https://developer.hatenastaff.com/entry/2022/09/01/093000 *3: https://github.com/css-modules/css-modules/issues/303
  15. 発表を通して伝えたかったこと 35 • メンテナンスされてるのは重要 ◦ 活発じゃなくて良いけど、世の中の変化には追従してほしい ▪ CSS の新機能が登場した時に、それを取り込むとか •

    情熱を持った人がいると、変化しやすい ◦ CSS の新機能への追従もそう ◦ 「CSS Modules 良くするために、ツール作ろうぜ!」 ◦ 情熱って大事だね
  16. まとめ 36 • はてなでは CSS Modules 使ってる ◦ デザイナーが CSS

    を書く、という業務形態にマッチしてた ◦ 補助ツールを作って、開発体験を向上させた • とはいえ... ◦ 開発体験に多少の難あり ◦ 業務形態が違えば、他の技術がマッチするかも ◦ 世の中の変化に追従できるものだと、なお良い