我們先直白點：你大概并不需要那些 Button.js、PrimaryButton.js、OutlinePrimaryButton.js 甚至 MaybeIfItsFridayButton.js。

在2025年，我們被過度抽象的組件庫淹沒了——原子設計、過度工程化的 UI 庫。

現在，該是我們聊聊「反潮流」的前端極簡主義的時候了。

這不是裝腔作勢的開發者宣言。

而是我在快速上線、減少調試、并長期維護項目的實踐中總結出的寶貴經驗。

到底什么是前端極簡主義？

前端極簡主義并非「不寫代碼」，而是「只寫必要的代碼」。

它意味著：

• 盡量減少無意義的組件
• 精簡 CSS
• 使用更聰明的默認值，避免過多配置
• 多用語義化 HTML，而不是大量沒有意義的 div

簡而言之，這是在清晰性和可維護性上做出取舍，而非過于追求所謂的「可復用性」（尤其是當組件只被用了一兩次時）。

問題一：過度抽象陷阱

很多人一定經歷過這種場景：

一開始，你寫了一個通用按鈕組件：

<Button>提交</Button>

后來市場部門要一個透明按鈕，于是你又寫了 GhostButton。 再然后有人要求綠色的行動按鈕（CTA），于是你有了 PrimaryButton、SecondaryButton、CTAButton，接下來就只剩頭疼了。

怎么辦？

試試 Tailwind（或 CSS 變量），直接在需要的地方應用樣式類，直到你真的感覺到明顯的重復。

除非你的項目真的跨多個項目或多個團隊，否則無需提前抽象。

?? 建議：如果一個組件沒有被復用兩次以上，就別急著抽象。

問題二：過多的 CSS

我們至今仍承受著過去 CSS 遺留下來的恐懼文化，像回到2013年一樣，苦苦與級聯（cascade）、特異性（specificity）和盒模型做斗爭。最后為了重置搞亂的樣式，又不得不寫400行的 global.css。

但2025年，你完全可以：

使用 Tailwind（或實用類優先的 CSS），避免命名焦慮：

<!-- 干凈、清晰、不再為BEM命名發愁 -->
<div class="flex items-center justify-between p-4 bg-gray-100">
  <h1 class="text-xl font-semibold">儀表盤</h1>
  <button class="text-sm text-blue-600">退出登錄</button>
</div>

無需頻繁切換上下文。 無需再面對 .dashboard__nav__left--button-alt 這樣的怪異類名。

問題三：重復造輪子（而且造得不好）

別再自己寫模態框了！

對，我就是這個意思。2025年不再適合你去手寫符合無障礙規范（a11y）的模態框組件，除非你真的有特殊需求。

請使用 Headless UI 等無樣式組件庫，而不是臃腫的全功能組件庫：

npm i @headlessui/react

然后像這樣輕松調用：

尊重瀏覽器原生能力，不要再用 shadow DOM 把自己逼到絕境。

前端極簡主義的實際操作

現在，我的默認開發習慣變成了：

• 盡量使用原生 HTML 元素。
• 只有當組件被使用2次以上時才開始抽象。
• 使用 Tailwind 或小型工具類進行布局。
• UI 庫最多選用1-2個。
• 邏輯與 UI 分離，但不進行過度抽象。

「但是我的團隊希望一切都模塊化啊！」

非常理解，但極簡主義并非完全否定結構，而是：

• 對模塊化保持謹慎。
• 避免過早優化。
• 與團隊溝通明確區分「當前真正需要的」與「僅僅是錦上添花」的功能。

想讓組件真正「可復用」？

很好，先證明它們確實有復用價值，再做抽象化。

你無需親手搭建一切，甚至大部分東西也不需要自己搭。

在2025年，前端開發最快速的團隊，往往是：

• 懂得簡化，拒絕過度工程化的團隊。
• 能快速分辨哪些組件值得抽象，哪些應保持簡單的團隊。
• 重視清晰性與可維護性的團隊。

別再盲目追隨潮流。少一點代碼，多一點效率。