[TOC] # 簡介 從原生的 Css 到 CSS Modules，再到 Css In Js，目標是讓開發者更高效地寫組件的樣式。Styled Components 是基于 Css In Js 方式實現的一個庫。目前主要服務于React。 # Styled-components 官網：https://www.styled-components.com/ 說一下 css-in-js，這玩意不是讓我們退化到寫內連樣式，而是使用 styled-components 1. 首先，styled-components 所有語法都是標準 css 語法，同時支持 scss 嵌套等常用語法，覆蓋了所有 css 場景。 2. 在樣式復寫場景下，styled-components 支持在任何地方注入全局 css，就像寫普通 css 一樣 3. styled-components 支持自定義 className，兩種方式，一種是用 babel 插件：https://github.com/styled-components/babel-plugin-styled-components, 另一種方式是使用 styled.div.withConfig({ componentId: "prefix-button-container" }) 相當于添加 className="prefix-button-container" 4. className 語義化更輕松，這也是 class 起名的初衷 5. 更適合組件庫使用，直接引用 import "module" 即可，否則你有三條路可以走：像 antd 一樣，單獨引用 css，你需要給 node_modules 添加 css-loader；組件內部直接 import css 文件，如果任何業務項目沒有 css-loader 就會報錯；組件使用 scss 引用，所有業務項目都要配置一份 scss-loader 給 node_modules；這三種對組件庫來說，都沒有直接引用來的友好 6. 當你寫一套組件庫，需要單獨發包，又有統一樣式的配置文件需求，如果這個配置文件是 js 的，所有組件直接引用，對外完全不用關注。否則，如果是 scss 配置文件，擺在面前還是三條路：每個組件單獨引用 scss 文件，需要每個業務項目給 node_modules 添加 scss-loader（如果業務用了 less，還要裝一份 scss 是不）；或者業務方只要使用了你的組件庫，就要在入口文件引用你的 scss 文件，比如你的組件叫 button，scss 可能叫 common-css，別人聽都沒聽過，還要查文檔；或者業務方在 webpack 配置中單獨引用你的 common-css，這也不科學，如果用了3個組件庫，天天改 webpack 配置也很不方便。 7. 當 css 設置了一半樣式，另一半真的需要 js 動態傳入，你不得不 css + css-in-js 混合使用，項目久了，維護的時候發現某些 css-in-js 不變了，可以固化在 css 里，css 里固定的值又因為新去求變得可變了，你又得拿出來放在 css-in-js 里，實踐過就知道有多么煩心。 ----by [黃子毅](https://www.zhihu.com/people/huang-zi-yi-83) # [CSS Modules](https://github.com/css-modules/css-modules) 詳解 CSS的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效。 產生局部作用域的唯一方法，就是使用一個獨一無二的class的名字，不會與其他選擇器重名。這就是 CSS Modules 的做法。 Sass/Less/PostCSS 等解決 CSS 編程能力弱的問題，但這**并沒有解決模塊化最重要的問題**。 CSS 模塊化重要的是要解決好兩個問題：CSS 樣式的導入和導出。 1. 靈活按需導入以便復用代碼； 2. 導出時要能夠隱藏內部作用域，以免造成全局污染。 CSS 模塊化的解決方案有很多，但主要有兩類。 1. 一類是徹底拋棄 CSS，使用 JS 或 JSON 來寫樣式。[Radium](https://github.com/FormidableLabs/radium)，[jsxstyle](https://github.com/petehunt/jsxstyle)，[react-style](https://github.com/js-next/react-style) 屬于這一類。優點是能給 CSS 提供 JS 同樣強大的模塊化能力；缺點是不能利用成熟的 CSS 預處理器（或后處理器） Sass/Less/PostCSS，`:hover` 和 `:active` 偽類處理起來復雜。 2. **另一類是依舊使用 CSS，但使用 JS 來管理樣式依賴，代表是 CSS Modules**。CSS Modules 能最大化地結合現有 CSS 生態和 JS 模塊化能力，API 簡潔到幾乎零學習成本。發布時依舊編譯出單獨的 JS 和 CSS。 **它并不依賴于 React，只要你使用 Webpack，可以在 Vue/Angular/jQuery 中使用。** 是我認為目前最好的 CSS 模塊化解決方案。近期在項目中大量使用，下面具體分享下實踐中的細節和想法。 ## 優點 CSS Modules 很容易學，它不是將 CSS 改造成編程語言，而是功能很單純，**只加入了局部作用域和模塊依賴**，同時又非常有用，可以保證某個組件的樣式，不會影響到其他組件，這恰恰是網頁組件最急需的功能。 ## css-loader和style-loader 那么，css-loader和style-loader是干什么用的呢？ 引用《入門webpack》中的原文：css-loader 使你能夠使用類似`@import`和`url(...)`的方法實現`require`的功能，style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的js文件中。 因此，我們這樣配置后，遇到后綴為.css的文件，webpack先用css-loader加載器去解析這個文件，遇到“@import”等語句就將相應樣式文件引入（所以如果沒有css-loader，就沒法解析這類語句），最后計算完的css，將會使用style-loader生成一個內容為最終解析完的css代碼的style標簽，放到head標簽里。 需要注意的是，loader是有順序的，webpack肯定是先將所有css模塊依賴解析完得到計算結果再創建style標簽。因此應該把`style-loader`放在`css-loader`的前面（webpack loader的執行順序是從右到左）。 # 參考 [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html) [深度解讀CSS工程化實踐成果](http://www.uml.org.cn/ajax/201710111.asp?artid=20737) [寫CSS的姿勢](https://www.w3cplus.com/css/css-evolution.html) [精讀《請停止 css-in-js 的行為》](https://zhuanlan.zhihu.com/p/26878157)