[譯]為什麼我用 JavaScript 來編寫 CSS
- 原文地址： Why I Write CSS in JavaScript
- 原文作者：max stoiber
- 譯文出自： 掘金翻譯計劃
- 本文永久連結： github.com/xitu/gold-m…
- 譯者： Ivocin
- 校對者： MacTavish Lee , Mirosalva
三年來，我設計的 Web 應用程式都沒有使用 .css 檔案。作為替代，我用 JavaScript 編寫了所有的 CSS。
我知道你在想什麼：“為什麼有人會用 JavaScript 編寫 CSS 呢？！” 這篇文章我就來解答這個問題。
CSS-in-JS 長什麼樣？
開發者們已經建立了 不同風格的 CSS-in-JS 。迄今為止最受歡迎的，是我和他人共同開發的一個叫做styled-components 的庫，在 GitHub 上有超過 20,000 顆星。
如下是它與 React 一起使用的例子：
import styled from 'styled-components' const Title = styled.h1` color: palevioletred; font-size: 18px; ` const App = () => ( <Title>Hello World!</Title> ) 複製程式碼
這會在 DOM 裡渲染一個字型大小為 18px 的淺紫紅色的 <h1> ：
為什麼我喜歡 CSS-in-JS？
主要是 CSS-in-JS 增強了我的信心 。我可以在不產生任何意外後果的情況下，新增、更改和刪除 CSS。我對元件樣式的更改不會影響其他任何內容。如果刪除元件，我也會刪除它的 CSS。不再是隻增不減的樣式表了！ :sparkles:
信心：在不產生任何意外後果的情況下，新增、更改和刪除 CSS，並避免無用程式碼。
易維護：再也不需要尋找影響元件的 CSS 了。
尤其是我所在的團隊從中獲取了很大的信心。我不能指望所有團隊成員，特別是初級成員，對 CSS 有著百科全書般的理解。最重要的是，截止日期還可能會影響質量。
使用 CSS-in-JS，我們會自動避開 CSS 常見的坑，比如類名衝突和權重大戰（specificity wars）。這使我們的程式碼庫整潔，並且開發更迅速。 :heart_eyes:
提升的團隊合作：無論經驗水平如何，都會避開 CSS 常見的坑，以保持程式碼庫整潔，並且開發更迅速。
關於效能，CSS-in-JS 庫跟蹤我在頁面上使用的元件，只將它們的樣式注入 DOM 中。雖然我的 .js 包稍大，但我的使用者下載了儘可能小的有效 CSS 內容，並避免了對 .css 檔案的額外網路請求。
這導致互動時間稍微長一點，但是首次有效繪製卻會快很多！ :dash:
高效能：僅向用戶傳送關鍵 CSS 以快速進行首次繪製。
我還可以基於不同的狀態（ variant="primary" vs variant="secondary" ）或全域性主題輕鬆調整元件的樣式。當我動態更改該上下文時，該元件將自動應用正確的樣式。 :nail_care:
動態樣式：基於全域性主題或不同狀態設定元件樣式。
CSS-in-JS 還提供 CSS 前處理器的所有重要功能。所有庫都支援 auto-prefixing，JavaScript 原生提供了大多數其他功能，如 mixins（函式）和變數。
我知道你在想什麼：“Max，你也可以通過其他工具或嚴格的流程或大量的培訓來獲得這些好處。是什麼讓 CSS-in-JS 變得特別？”
CSS-in-JS 將所有這些好處結合到一個好用的包中並強制執行它們。它引導我走向成功的關鍵：做正確的事情很容易，做錯事很難（甚至不可能）。
誰在使用 CSS-in-JS？
有上千家公司在生產中使用 CSS-in-JS，包括Reddit、 Patreon 、 Target , Atlassian 、 Vogue 、 GitHub 、Coinbase 等等。( 包括本網站 )
CSS-in-JS 適合你嗎？
如果你使用 JavaScript 框架來構建包含元件的 Web 應用程式，那麼 CSS-in-JS 可能非常適合。特別是你所在團隊中每個人都理解基本的 JavaScript。
如果你不確定如何開始，我會建議你嘗試一下 CSS-in-JS，親眼看看它有多好！ :v:
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為掘金 上的英文分享文章。內容覆蓋 Android 、 iOS 、 前端 、 後端 、 區塊鏈 、 產品 、 設計 、 人工智慧 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃 、官方微博、 知乎專欄 。