曾經的前端開發中，JavaScript、CSS、HTML 作為三大獨立的技術，各司其職，互不干涉。然而隨著組件結構 React 的出現，將 HTML、CSS、JavaScript 強制混合在一起，這就有了 JSX 以及 CSS in JS 的誕生。接下來，本文作者將分享使用 CSS in JS 的真實感受。
作者 | max stoiber
譯者 | 蘇本如
出品 | CSDN（ID：CSDNNews）
三年來，我都沒有用任何 .css 文件為我的 Web 應用程序設置樣式了，相反地，我用 Javascript 來編寫所有的 CSS 樣式。
我知道你想問什麼：“為什麼有人會用 Javascript 編寫 CSS 呢？”下面聽我來解釋。
CSS-in-JS 是什麼樣子的？
開發人員已經創建了不同風格的 CSS-in-JS 庫。到目前為止最受歡迎的是我參與創建的一個名為 styled-components （https://styled-components.com/）的庫，它在GitHub上已經擁有20,000多顆星。
將其與 React 結合起來使用，就像下面的示例：
import styled from 'styled-components'
const Title = styled.h1`
color: palevioletred;
font-size: 18px;
`
const App = () => (
<title>Hello World!/<title>
)
這個示例將渲染字體大小為 18px, 顏色為”蒼紫羅藍色”的
標題文字到 DOM 組件，效果如下：
我為什麼喜歡 CSS-in-JS
首先，CSS-in-JS 增強了我的信心。我可以添加、更改和刪除 CSS，而不會產生任何意外的後果。我對一個組件樣式的更改也不會影響任何其他的內容。如果我刪除了一個組件，我同時也刪除它的 CSS。不再有以前的樣式表越來越臃腫的問題！
- 信心提升：添加、更改和刪除 CSS，不會產生任何意外的後果，同時避免了無用的死代碼。
- 無痛維護：不需要再去尋找影響你的組件的 CSS 樣式代碼。
我曾經加入的團隊尤其受益於這種信心提升。我不能期望所有的團隊成員，特別是年輕人，對 CSS 有一個百科全書式的理解。
有了 CSS-in-JS，我們就可以自動避開常見的令人沮喪的 CSS 問題，例如類名衝突和 CSS 優先級特性。這讓我們的代碼庫保持乾淨，同時也讓我們能更快地推進開發進程。
- 增強的團隊合作：無論團隊成員的經驗水平如何，CSS-in-JS 可以避免常見的令人沮喪的 CSS 問題，以保持代碼庫乾淨並加快開發進程。
在性能方面，CSS-in-JS 庫會跟蹤我在頁面上使用的組件，並且只將它們的樣式注入到 DOM 中。雖然這樣做會讓我的 .js 包稍微重了一些，但是用戶需要下載的 CSS 負荷變得儘可能地小了，對 .css 文件的額外網絡請求也減少了。
頁面的互動會變得稍微慢一些，但對用戶來說有價值的首屏渲染(first paint)的時間加快了！
- 快速性能：只給用戶發送關鍵的 CSS 來保證快速的首屏渲染(first paint)速度。
我還可以根據不同的狀態（variant=“primary”vs. variant=“secondary”）或全局主題來輕鬆調整組件的樣式。當我動態更改上下文時，組件將自動應用正確的樣式。
- 動態樣式：使用全局主題或基於不同狀態來輕鬆設置組件的樣式。
CSS-in-JS 仍然提供 CSS 預處理器的所有重要功能。所有的庫都支持自動前綴，而 Javascript 提供了大多數其他特性，比如本地的 mixins（函數）和 variables。
我知道你想說：“Max，你也可以通過其他工具、嚴格的流程或廣泛的培訓來獲得這些好處。CSS-in-JS 看起來沒有什麼特別的啊？“
CSS-in-JS 將所有這些好處組合到一個方便的 package 中並加以實施。它指引我走向成功之路：做正確的事容易，做錯誤的事難（甚至不可能）。
誰在用CSS-in-JS？
數千家公司在使用CSS-in-JS進行開發，包括 Reddit、Patreon、Target、Atlassian、Vogue、GitHub、Coinbase 等等。
CSS-in-JS 是否適合你？
如果你正使用一個 Javascript 框架來構建一個包含組件的 Web 應用程序，那麼 CSS-in-JS 可能是一個很好的選擇。尤其是在你的團隊中的每個團隊都瞭解基本的 Javascript 的情況下。
如果你不確定如何在你的團隊中開始使用，我建議你自己先嚐試一下，看看它會不會讓你感覺很好！
原文：https://mxstbr.com/thoughts/css-in-js/
本文為 CSDN 翻譯，如需轉載，請註明來源出處。
閱讀更多 CSDN 的文章
