為什麼我花了多年時間試圖讓 CSS 狀態變得可預測

背景

這篇文章探討了 CSS 狀態管理中長期存在的不可預測性問題，特別是當多個狀態（如 hover、disabled、dark mode）重疊時，瀏覽器往往依賴原始碼順序或複雜的權重規則來決定樣式，導致組件在擴展時變得極其脆弱。作者為此開發了名為 Tasty 的編譯工具，試圖透過宣告式的狀態映射表，將開發者定義的優先級編譯成互斥的選擇器，從而消除 CSS 階層機制帶來的歧義。

社群觀點

在 Hacker News 的討論中，社群對於這種抽象層的必要性呈現出兩極化的反應。部分開發者對作者的初衷表示共鳴，認為在建構大型企業級組件庫時，狀態衝突確實是難以忽視的痛點。有留言者提出另一種技術路徑，建議利用 CSS 的 :where() 虛擬類別來重置所有選擇器的權重，藉此讓樣式完全遵循「最後宣告者勝」的原則，這或許是比編譯互斥選擇器更輕量且符合原生規範的替代方案。

然而，很大一部分的討論聚焦於對「過度抽象」的反思。許多資深開發者主張「直接對機器編程」，認為 CSS 本身並非設計不良，而是許多開發者從未花時間從底層原理學習其權重與階層邏輯。他們指出，過去二十年來，開發者不斷為了逃避學習原生工具而發明各種繁瑣的框架，結果卻在框架出錯時因為缺乏基礎知識而陷入更大的困境。這派觀點認為，現代 CSS 已經擁有 Grid、變數、容器查詢等強大功能，與其增加一個編譯層來解決狀態問題，不如回歸基礎，透過良好的類別命名與外部樣式表來管理複雜性。

此外，也有討論提到這種工具在效能與維護上的潛在代價。雖然互斥選擇器能解決邏輯衝突，但當組件狀態變得極其複雜時，生成的選擇器數量與複雜度可能會對瀏覽器解析效能產生影響。儘管作者強調這套系統已在實際的企業產品中驗證，但社群中仍有聲音質疑，對於大多數中小型專案而言，引入這種額外的編譯機器是否反而增加了認知負擔。這種爭論反映了 Web 開發領域長期存在的矛盾：究竟該透過更強大的工具來屏蔽底層缺陷，還是該要求開發者更深入地掌握原生語言的特性。

延伸閱讀

在討論過程中，有參與者提到了 Eric Meyer 的經典著作《CSS 權威指南》（被暱稱為 Salmon Book），認為這是理解 CSS 階層與權重邏輯的必讀資源。另外，針對狀態管理的簡化，社群也建議關注 CSS 原生的 :where() 與 :is() 等現代選擇器的發展，這些功能在不引入外部編譯器的情況下，已能解決部分權重競爭的問題。