CSS Module・CSS in JS抗争の過去と現在

社内でのLT資料を外部向けに編集したものです。

Transcript

1. CSS Module ‧CSS in JS 抗争の過去と現在 CSS Module ‧CSS in JS 抗争の過去と現在 1
2. 前置き React ベースで話をします ですがReact の知識は必要ないです CSS Module には⾊々な解釈があります 設計的な意味の概念 Shadow DOM でのモジュール化（CSS Scoping Module ） ライブラリの名前（css-modules ） Webpack でのモジュール化 （css-loader ）<- 以下これを指す CSS Module ‧CSS in JS 抗争の過去と現在 2
3. 本スライドのトピック React でのスタイリング What is CSS Module? What is CSS in JS? CSS Module vs CSS in JS それぞれのテストについて 個⼈的所感 CSS Module ‧CSS in JS 抗争の過去と現在 3
4. React でのスタイリング CSS Module ‧CSS in JS 抗争の過去と現在 4
5. React 公式ドキュメントでの書き⽅ # className というprops を渡す render() { return <span className="menu navigation-menu">Menu</span> } # state やprops に応じて動的にclassName を変更させる render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> } 引⽤：https://reactjs.org/docs/faq-styling.html CSS Module ‧CSS in JS 抗争の過去と現在 5
6. What is CSS Module? CSS Module ‧CSS in JS 抗争の過去と現在 6
7. 通常はグローバルなCSS の参照をscoped にする /* style.css */ .className { color: green; } // JS 側でCSS を読み込む import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; CSS Module ‧CSS in JS 抗争の過去と現在 7
8. // ビルド時、scoped に書き直されたCSS ファイルを出⼒する // 出⼒されるCSS ファイルのコード .xxx_yyy_zzz_className { color: green; } 引⽤：https://qiita.com/Quramy/items/a5d8967cdbd1b8575130 CSS Module ‧CSS in JS 抗争の過去と現在 8
9. Next.js ではビルトインサポートされている が、Webpack でdeprecated されそうなので今後どうなるのか不明 https://github.com/webpack-contrib/css-loader/issues/1050 CSS Module ‧CSS in JS 抗争の過去と現在 9
10. What is CSS in JS? CSS Module ‧CSS in JS 抗争の過去と現在 10
11. JS ファイルにCSS を記述する 以下、styled-components （CSS in JS ライブラリ）でのスタイリング CSS Module ‧CSS in JS 抗争の過去と現在 11
12. const Text = styled.div` color: white, background: black ` <Text>Hello CSS-in-JS</Text> // Component （JS ファイル）にCSS を埋め込むことができ、JS のランタイムで解釈（展開）される <style> .hash136s21 { background-color: black; color: white; } </style> <p class="hash136s21">Hello CSS-in-JS</p> 引⽤：https://mkai.hateblo.jp/entry/2018/08/25/135439 CSS Module ‧CSS in JS 抗争の過去と現在 12
13. // コンポーネントのフィールド値からロジカルにスタイリングできる const Title = styles.h1` padding: 20px; background-color: #222; text-align: center; color: white; font-size: 1.5em; ${props => props.secondary && css` background-color: #fff; color: #000; padding: 10px; font-size: 1em; `} `; 引⽤：https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25 CSS Module ‧CSS in JS 抗争の過去と現在 13
14. React 公式の⾒解 What is CSS-in-JS? “CSS-in-JS” refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Note that this functionality is not a part of React, but provided by third-party libraries. React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className. 「使いたければ使えば。迷ってるんなら普通にclassName でやってね」 引⽤：https://reactjs.org/docs/faq-styling.html CSS Module ‧CSS in JS 抗争の過去と現在 14
15. ライブラリ例 styled-components (Star:33.4k) https://github.com/styled-components/styled-components ⼀番メジャー emotion (Star:12.9k) https://github.com/emotion-js/emotion styled-components に似ているが、そっちより融通が効く（らしい） linaria (Star:7.1k) https://github.com/callstack/linaria zero runtime なのでパフォーマンスが良い CSS Module ‧CSS in JS 抗争の過去と現在 15
16. CSS Module vs CSS in JS CSS Module ‧CSS in JS 抗争の過去と現在 16
17. CSS Module ‧CSS in JS 抗争の過去と現在 17
18. 2017/2/12 CSS Modules vs Styled Components - Hashnode 「学習コストの差」 2017/5/9 SPA におけるCSS について、ひとつの解（追記あり） - エンジニアをリングする 「JS とCSS で値共有できる」 2017/6/15 Web サイト開発にCSS in JavaScript を使うのはやめよう | POSTD 「CSS in JS の神話（誤解）」 CSS Module ‧CSS in JS 抗争の過去と現在 18
19. 2019/3/14 css-modules を⽌めようとしている話（具体的な解決編） - saneyuki_s log 「import の順序やディレクトリ構造などからcascading 順序が変わるのつらい」 2020/2/28 css-loader のdeprecated ⽰唆 2020/3/11 styled-components （CSS in JS ）をやめた理由と、不完全なCSS Modules を愛する⽅ 法 - Qiita 「開発ツールの依存性解決つらい」 2020/6/25 styled-components の採⽤と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエ ンジニアのブログ 「視認性悪くなりそう」 CSS Module ‧CSS in JS 抗争の過去と現在 19
20. 2020/12/1 Sass から CSS Modules 、そして styled-components に乗り換えた話｜⾷べログ フロ ントエンドエンジニアブログ｜ note 「デザイナーさんと作業分担しやすい」 2021/3/11 CSS Modules vs CSS-in-JS. Who wins? - DEV Community 「それぞれのメリット/ デメリット」 2021/4/9 Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website 「styled-components とlinaria の速度⽐較」 CSS Module ‧CSS in JS 抗争の過去と現在 20
21. それぞれのテストについて CSS Modules をStorybook で適⽤するために必要なwebpack の設定 | MK Dev 【React 】Jest でSnapshot テストをしたいならCSS Modules をやめてCSS-in-JS に 切り替えよう | LaptrinhX テストツールによって相性がある？ 実際に扱っていないので要調査 CSS Module ‧CSS in JS 抗争の過去と現在 21
22. 個⼈的所感 CSS in JS 開発環境が既存のCSS とは別世界にある チームに学習コストを要求する テストがしやすい？ メンバーのポジション‧レベル‧モチベーションから考慮 CSS Module Next.js がサポートしている間はどうにかなるのでは CSS もしくはJS に慣れていない⼈を含んだチーム向け CSS in JS よりはハードルが低そう CSS Module ‧CSS in JS 抗争の過去と現在 22
23. CSS Module ベースで命名設計をしっかりする？（第三の選択） CSS Module が使えなくなったとしてもハシゴを外せる このやり⽅でハシゴを外せるかどうか、いったん試してみる必要がある 命名設計が理解できる⼈で構成されたチーム、かつ少⼈数向け 旧時代（語弊）に戻る覚悟が必要 ⼈数が多いと命名設計の解釈がずれてしまう可能性がありメンテコストが上 がる恐れ それを解決してくれるのがScoped なCSS 多⼈数であればScoped なCSS ⼀択 CSS Module ‧CSS in JS 抗争の過去と現在 23