2024年:如何根據專案具體情況選擇合適的CSS技術棧

赵康發表於2024-04-03

2024年:如何根據專案具體情況選擇合適的CSS技術棧

(請注意,這是一篇主觀且充滿個人技術偏好的文章)

方案一: antd/element ui/類似競品

適合情形: 專案沒有設計師 or 大部分人不熟悉CSS且專案趕時間。
antd自帶樣式,開發人員無需學習CSS,僅需檢視參考文件就可以製作出基本不醜的UI介面。

方案二: TailwindCSS + shadcn/ui

適合情形: 設計師對還原度和定製化有較高要求 and 大部分人熟悉CSS and 專案趕時間。
使用headless元件庫可以充分將樣式和邏輯解耦,滿足設計師高度定製化的需求。
shadcn/ui的理念是目前headless元件庫的最高效的使用方式。它沒有對底層headless元件庫進行任何封裝,而是提供豐富和高質量的示例程式碼。開發者只需選擇自己需要的元件,將程式碼複製並貼上到自己的專案中,並根據自己的需求進行自定義。
TailwindCSS可以提高樣式開發速度和統一design token.

方案三: 現代CSS

適合情形: 大家希望磨練技術 and 專案不趕時間
現代 CSS 涵蓋了許多新特性,適用於那些想要深入瞭解 CSS 並提升技術水平的團隊。

不推薦方案: sass/less/stylus

現代CSS已經擁有了以上這些前處理器的有價值的關鍵功能。且樣式本質上是HTML的配置,無法脫離HTML單獨存在。脫離文件結構進行樣式的抽象和複用就好像在構造一個精巧的空中樓閣,需要高水平的開發者長期小心翼翼地維護,否則一不小心就會坍塌。

總結

選擇合適的 CSS 技術棧是一個重要的決策,每個方案都有其優勢和限制。我們需要根據專案的具體情況,權衡各種因素,選擇最適合的方案。

相關文章