Just Writing CSS 的禪意
我會說這是未來，但我們已經在這樣做了。
不喜歡 CSS 是一種時尚。有很多原因導致這種情況，但歸根結底是：CSS 是不可預測的。如果你從未有過調整樣式規則，卻意外破壞了你認為完全不相關的佈局的經驗——通常在你嘗試發佈時——那麼你要嘛是新手，要嘛就是比我們其他人厲害得多的程式設計師。
所以 JavaScript 社群捲起袖子開始工作。在過去的幾年裡，出現了大量旨在使 CSS 行為更可控的函式庫，統稱為 CSS-in-JS。
你可能沒有意識到的是，CSS 的最大問題可以在沒有 CSS-in-JS 的情況下解決。如果沒有這些問題，寫 CSS 不僅可以忍受——而且很愉快。而且你不需要為 CSS-in-JS 帶來的額外問題尋找解決方案。
這篇文章絕非批評 CSS-in-JS 社群所做的努力。它是 JS 生態系統中最活躍的角落之一，每週都有新想法湧現。相反，我的目的是說明為什麼基於具有真實 CSS 的單文件元件的替代方法如此令人愉快。
CSS 的最大問題
CSS 中的一切都是全域的。正因為如此，原本用於一個標記的樣式往往會影響到另一個標記。由於這個原因，開發人員經常求助於瘋狂的命名空間約定（不是「規則」，因為它們很難強制執行），這大多只會增加你患 RSI 的風險。
當你在團隊中工作時，情況會變得更糟。沒有人敢碰別人撰寫的樣式，因為通常不清楚它們在做什麼、它們應用於哪個標記，以及如果你刪除它們會發生什麼災難。
這一切的後果是只能附加的樣式表。沒有辦法知道哪些程式碼可以安全地刪除，因此很常見的是用另一個更具體的樣式來撤銷一些現有的樣式——即使在相對較小的專案中也是如此。
單文件元件改變了一切
SFC 背後的想法很簡單：你在一個 HTML 檔案中編寫你的元件，該檔案（可選）包含一個 <style> 和 <script> 屬性，描述元件的樣式和行為。Svelte、Ractive、Vue 和 Polymer 都遵循這個基本模式。
（在本文的其餘部分，我們將使用 Svelte，很明顯。但如果使用範本語言的想法讓你感到不寒而慄——你的恐懼是錯誤的，但那是另一天的議題——那麼就使用 Vue，它允許你在 SFC 中使用 JSX。）
結果會發生幾件美好的事情
- 你的樣式是元件作用域的。不再洩漏，不再有不可預測的級聯。也不再有為防止衝突而設計的長篇大論的類別名稱。
- 你不需要在資料夾結構中四處尋找那些破壞你東西的規則。
- 編譯器（在 Svelte 的情況下）可以識別並刪除未使用的樣式。不再有只能附加的樣式表！
讓我們看看這在實踐中是什麼樣子。
每個程式碼編輯器都已經知道 CSS，因此你很有可能會獲得自動完成、程式碼檢查、語法高亮等等——所有這些都不需要額外的 JS 疲勞誘導工具。
而且因為它是真實的 CSS，而不是一些到處都是駝峰式大小寫的引號模仿者，我們可以利用「在開發者工具中調整，貼回我們的原始碼」的工作流程，我個人離不開這個流程。請注意，我們開箱即用就獲得了 CSS 來源對應，因此你可以立即精確定位相關的程式碼行。這的重要性怎麼強調都不為過：當你處於 WYSIWYG 模式時，你不會從你的元件樹的角度思考，因此擁有一個強大的方法來弄清楚這些該死的樣式來自哪裡至關重要。如果其他人最初編寫了元件，情況更是如此。（我向你保證，這是你 CSS 工作流程中最大的生產力提升。如果你在沒有來源對應的情況下編寫樣式，你幾乎肯定會浪費很多時間。我知道我曾經是這樣。）
Svelte 轉換你的選擇器（使用也應用於受影響元素的屬性，儘管確切的機制並不重要，並且可能會更改）以實現作用域。它會警告並刪除任何未使用的規則，然後縮小結果並允許你將其寫入 .css 檔案。還有一個實驗性的新選項可以使用 shadow DOM 來封裝樣式，如果那是你喜歡的方式，可以編譯成 web 元件。
這一切之所以可能，是因為你的 CSS 在你的標記的上下文中進行了解析（使用 css-tree）和靜態分析。靜態分析為各種令人興奮的未來可能性打開了大門——更智慧的優化、a11y 提示——如果你的樣式在運行時動態計算，則這些可能性會更加困難。我們才剛剛開始。
但我們可以新增工具來做 [x]！
如果你對影片的反應是「好吧，但如果我們使用 TypeScript 並為每個編輯器編寫外掛程式，那麼我們可以獲得所有的自動完成和語法高亮功能」——換句話說，如果你認為為了與 CSS 達到同等水平，建立、記錄、推廣和維護一系列輔助專案是有意義的——那麼，好吧，你和我可能永遠不會達成共識！
我們還沒有所有的答案——目前
話雖如此，CSS-in-JS 的確指出了某些懸而未決的問題的答案
- 我們如何從 npm 安裝樣式？
- 我們如何重複使用在單一位置定義的常數？
- 我們如何組合宣告？
就我個人而言，我認為這些問題並沒有超過上述方法的優點。你可能會有不同的優先順序，而且它們可能足以讓你放棄 CSS。
但歸根結底，你無論如何都必須了解 CSS。愛它或恨它，你至少必須學習它。作為網路的守護者，我們可以選擇：建立使網路開發學習曲線更加陡峭的抽象概念，或者共同努力修復 CSS 的缺點。我知道我選擇哪一個。