少寫一點，發布快一點：2025年的前端極簡主義
我們先直白點：你大概并不需要那些 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年，前端開發最快速的團隊，往往是：
- 懂得簡化，拒絕過度工程化的團隊。
- 能快速分辨哪些組件值得抽象，哪些應保持簡單的團隊。
- 重視清晰性與可維護性的團隊。
別再盲目追隨潮流。少一點代碼，多一點效率。
