瞭解CSS in JS(JSS)以及在React專案中配置並使用JSS

目錄

• 認識JSS
  • 什麼是JSS
  • JSS 的常見實現
  • JSS 的好處與壞處
    • 好處
    • 壞處
• 使用模組化CSS實現JSS
  • 安裝外掛
  • 在React專案中的tsconfig.json中新增配置
  • vscode專案中新增配置

認識JSS

什麼是JSS

簡單來說，一句話概括CSS in JS (JSS)，就是"行內樣式"（inline style）和"行內指令碼"（inline script）。

因為，自從React出現以後，基於元件化的要求，強制把HTML、CSS、JavaScript捆綁在一起，在同一個檔案裡面，封裝了結構、樣式、以及邏輯。這雖然違背html發明初期的"關注點分離"的原則，但更有利於元件之間的隔離。而每個元件包含了所有需要用到的程式碼，不必依賴外部環境，元件之間沒有耦合。所以，隨著 React 的走紅和元件模式深入人心，“關注點分離”原則越發淡出人們的視野，而React所帶來的"關注點混合"的原則逐漸成為主流。

React 對 CSS 封裝非常簡單，就是沿用了 DOM 的 style 屬性物件。CSS-in-JS是一種技術（technique），而不是一個具體的庫實現（library）。簡單來說CSS-in-JS就是將應用的CSS樣式寫在JavaScript檔案裡面，而不是獨立為一些.css，.scss或者less之類的檔案，這樣你就可以在CSS中使用一些屬於JS的諸如模組宣告，變數定義，函式呼叫和條件判斷等語言特性來提供靈活的可擴充套件的樣式定義。值得一提的是，雖然CSS-in-JS不是一種很新的技術，可是它在國內普及度好像並不是很高，它當初的出現是因為一些component-based的Web框架（例如React，Vue和Angular）的逐漸流行，使得開發者也想將元件的CSS樣式也一塊封裝到元件中去以解決原生CSS寫法的一系列問題。還有就是CSS-in-JS在React社群的熱度是最高的，這是因為React本身不會管使用者怎麼去為元件定義樣式的問題，而Vue和Angular都有屬於框架自己的一套定義樣式的方案。

JSS 的常見實現

由於React 對 CSS 的封裝非常弱，導致出現了一系列的第三方庫，用來加強 React 的 CSS 操作。它們統稱為 CSS in JS，意思就是使用 JS 語言寫 CSS。根據不完全統計，各種 CSS in JS 的庫至少有47種。

1. Styled-components
2. 使用模組化css

JSS 的好處與壞處

以下總結自知乎/進擊的大蔥/Css in JS 的好與壞

好處

1. 區域性樣式 - Scoping Styles
2. 避免無用的CSS樣式堆積
3. Critical CSS
4. 基於狀態的樣式定義
5. 封裝得更好的元件庫

壞處

1. 陡峭的學習曲線

2. 執行時消耗

3. 程式碼可讀性差

4. 沒有統一的業界標準

使用模組化CSS實現JSS

安裝外掛

npm install typescript-plugin-css-modules --save-dev

在React專案中的tsconfig.json中新增配置

vscode專案中新增配置

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

如此一來我們便能在專案中使用JSS並且有智慧提示