CSS modules 與 React中實踐

最近一直在學習React,看上去蠻簡單的內容，其實學習曲線仍是比較高的。

目前學到css綁定的問題，看到有一篇好的文章，就轉過來了。

CSS 模塊化的解決方案有不少，但主要有兩類。一類是完全拋棄 CSS，使用 JS 或 JSON 來寫樣式。Radium， jsxstyle ，react-style 屬於這一類。優勢是能給 CSS 提供 JS 一樣強大的模塊化能力；缺點是不能利用成熟的 CSS 預處理器（或後處理器） Sass/Less/PostCSS， :hover 和 :active 僞類處理起來複雜。另外一類是依舊使用 CSS，但使用 JS 來管理樣式依賴，表明是CSS Modules。CSS Modules 能最大化地結合現有 CSS 生態和 JS 模塊化能力，API 簡潔到幾乎零學習成本。發佈時依舊編譯出單獨的 JS 和 CSS。它並不依賴於 React，只要你使用 Webpack，能夠在 Vue/Angular/jQuery 中使用。

是否是應該添加個😊，學習零成本。

CSS Modules 模塊化方案

CSS Modules 內部經過ICSS 來解決樣式導入和導出這兩個問題。分別對應 :import 和 :export 兩個新增的僞類

:import("path/to/dep.css") {
  localAlias: keyFromDep;
  /* ... */
}
:export {
  exportedKey: exportedValue;
  /* ... */
}

但直接使用這兩個關鍵字編程太麻煩，實際項目中不多會直接使用它們，咱們須要的是用 JS 來管理 CSS 的能力。結合 Webpack 的 css-loader 後，就能夠在 CSS 中定義樣式，在 JS 中導入