Beyond Tailwind: Rediscovering the Art of Structured CSS

現代網頁開發領域一直由 utility-first CSS 框架主導，其中最著名的莫過於 Tailwind CSS。對於許多開發者而言，快速原型設計的便利性以及消除了「命名問題」的優點，使其成為了業界標準。然而，越來越多的開發者開始質疑，這種效率是否是以犧牲網頁的基本結構為代價。

The Shift Away from Utility-First

對於某些人來說，從 Tailwind 轉向其他方式不僅僅是語法的改變，更是回歸一種更具意圖性的文件結構方法。網頁的核心是 HTML——這種用於標記文件含義的語言。當開發者遠離 utility classes 時，他們往往被迫重新發現內容的含義與其視覺呈現之間的關係。

The Conflict Between Tailwind and Semantic HTML

對 utility-first 方法的主要批評之一是，它顛倒了傳統的網頁開發工作流程。開發者不再是先定義內容的含義，然後再套用樣式，而是發現自己往往是根據想要實現的視覺組件來構建佈局，這經常導致「div soup」——一個充滿了嵌套的 div 和 span 元素，而這些元素除了持有特定的 Tailwind classes 之外，沒有任何語義上的用途。

As noted by community members in a recent discussion, this shift in thinking can be detrimental to the overall quality of the web:

"The biggest problem with Tailwind is that it inverts the order that you should be thinking about HTML and CSS. HTML is marking up the meaning of the document. You should start there. Then style with CSS. If you need extra elements for styling at that point, you might use a div or span... Tailwind instead pushes the dev into a CSS-first approach."

這種方法可能會導致無障礙性（accessibility）和可讀性的下降，因為文件結構變得次於視覺樣式。這對於依賴螢幕閱讀器（screen readers）的使用者以及那些優先考慮未來兼容性、符合規範的 HTML 使用者來說，特別是個問題。

Alternatives and Modern Tooling

雖然 Tailwind 解決了 CSS 衝突和命名慣例的問題，但現代工具已經提供了其他方式來實現相同的益處，而無需犧牲語義結構。

Component-Based Scoping

Svelte 和 Angular 等框架預設就整合了 CSS scoping。透過將 CSS 限制在特定組件內，開發者可以避免在大型專案中讓傳統 CSS 難以管理的「全域命名空間」問題。這允許了獨立、乾淨的 HTML 結構，並將樣式封裝在組件內，而無需在 HTML 標記中求助於 utility classes。

The Role of LLMs in Development

大型語言模型（LLMs）的出現進一步改變了我們構建 UI 的觀點。一些開發者認為，當 LLMs 可以生成乾淨的 vanilla JavaScript 和 DOM manipulation code 時，對 React 或 TypeScript 等重型框架的依賴性正在變得不再那麼必要。這暗示了一種向更具「離線兼容性」的開發風格轉變，並減少了供應鏈依賴。

Conclusion

遠離 Tailwind 是不僅僅是工具的改變；它是一種對回歸網頁核心原則的承諾。透過優先考慮語義化 HTML 和結構化 CSS，開發者可以創建出在長期來看更具無障礙性、可讀性和可維護性的網站。雖然 utility-first 框架在快速原型設計中有其地位，但網頁的長期健康發展取決於我們能否產出反映文件含義而非僅僅是視覺外觀的標記語言。