[譯] 為什麼我用 JavaScript 來編寫 CSS

清秋發表於2019-03-13
JavaScriptCSS

三年來，我設計的 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>：

[譯] 為什麼我用 JavaScript 來編寫 CSS

為什麼我喜歡 CSS-in-JS？

主要是 CSS-in-JS 增強了我的信心。我可以在不產生任何意外後果的情況下，新增、更改和刪除 CSS。我對元件樣式的更改不會影響其他任何內容。如果刪除元件，我也會刪除它的 CSS。不再是只增不減的樣式表了！ ✨

信心：在不產生任何意外後果的情況下，新增、更改和刪除 CSS，並避免無用程式碼。

易維護：再也不需要尋找影響元件的 CSS 了。

尤其是我所在的團隊從中獲取了很大的信心。我不能指望所有團隊成員，特別是初級成員，對 CSS 有著百科全書般的理解。最重要的是，截止日期還可能會影響質量。

使用 CSS-in-JS，我們會自動避開 CSS 常見的坑，比如類名衝突和權重大戰（specificity wars）。這使我們的程式碼庫整潔，並且開發更迅速。 ?

提升的團隊合作：無論經驗水平如何，都會避開 CSS 常見的坑，以保持程式碼庫整潔，並且開發更迅速。

關於效能，CSS-in-JS 庫跟蹤我在頁面上使用的元件，只將它們的樣式注入 DOM 中。雖然我的 .js 包稍大，但我的使用者下載了儘可能小的有效 CSS 內容，並避免了對 .css 檔案的額外網路請求。

這導致互動時間稍微長一點，但是首次有效繪製卻會快很多！ ??

高效能：僅向使用者傳送關鍵 CSS 以快速進行首次繪製。

我還可以基於不同的狀態（variant="primary" vs variant="secondary"）或全域性主題輕鬆調整元件的樣式。當我動態更改該上下文時，該元件將自動應用正確的樣式。 ?

動態樣式：基於全域性主題或不同狀態設定元件樣式。

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，親眼看看它有多好！ ✌️

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章