少寫一點(diǎn)，發(fā)布快一點(diǎn)：2025年的前端極簡主義
我們先直白點(diǎn)：你大概并不需要那些 Button.js、PrimaryButton.js、OutlinePrimaryButton.js 甚至 MaybeIfItsFridayButton.js。
在2025年，我們被過度抽象的組件庫淹沒了——原子設(shè)計(jì)、過度工程化的 UI 庫。
現(xiàn)在，該是我們聊聊「反潮流」的前端極簡主義的時(shí)候了。
這不是裝腔作勢的開發(fā)者宣言。
而是我在快速上線、減少調(diào)試、并長期維護(hù)項(xiàng)目的實(shí)踐中總結(jié)出的寶貴經(jīng)驗(yàn)。
到底什么是前端極簡主義？
前端極簡主義并非「不寫代碼」，而是「只寫必要的代碼」。
它意味著：
- 盡量減少無意義的組件
- 精簡 CSS
- 使用更聰明的默認(rèn)值，避免過多配置
- 多用語義化 HTML，而不是大量沒有意義的 div
簡而言之，這是在清晰性和可維護(hù)性上做出取舍，而非過于追求所謂的「可復(fù)用性」（尤其是當(dāng)組件只被用了一兩次時(shí)）。
問題一：過度抽象陷阱
很多人一定經(jīng)歷過這種場景：
一開始，你寫了一個(gè)通用按鈕組件：
<Button>提交</Button>后來市場部門要一個(gè)透明按鈕，于是你又寫了 GhostButton。 再然后有人要求綠色的行動(dòng)按鈕（CTA），于是你有了 PrimaryButton、SecondaryButton、CTAButton，接下來就只剩頭疼了。
怎么辦？
試試 Tailwind（或 CSS 變量），直接在需要的地方應(yīng)用樣式類，直到你真的感覺到明顯的重復(fù)。
除非你的項(xiàng)目真的跨多個(gè)項(xiàng)目或多個(gè)團(tuán)隊(duì)，否則無需提前抽象。
?? 建議：如果一個(gè)組件沒有被復(fù)用兩次以上，就別急著抽象。
問題二：過多的 CSS
我們至今仍承受著過去 CSS 遺留下來的恐懼文化，像回到2013年一樣，苦苦與級聯(lián)（cascade）、特異性（specificity）和盒模型做斗爭。最后為了重置搞亂的樣式，又不得不寫400行的 global.css。
但2025年，你完全可以：
使用 Tailwind（或?qū)嵱妙悆?yōu)先的 CSS），避免命名焦慮：
<!-- 干凈、清晰、不再為BEM命名發(fā)愁 -->
<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 這樣的怪異類名。
問題三：重復(fù)造輪子（而且造得不好）
別再自己寫模態(tài)框了！
對，我就是這個(gè)意思。2025年不再適合你去手寫符合無障礙規(guī)范（a11y）的模態(tài)框組件，除非你真的有特殊需求。
請使用 Headless UI 等無樣式組件庫，而不是臃腫的全功能組件庫：
npm i @headlessui/react然后像這樣輕松調(diào)用：
尊重瀏覽器原生能力，不要再用 shadow DOM 把自己逼到絕境。
前端極簡主義的實(shí)際操作
現(xiàn)在，我的默認(rèn)開發(fā)習(xí)慣變成了：
- 盡量使用原生 HTML 元素。
- 只有當(dāng)組件被使用2次以上時(shí)才開始抽象。
- 使用 Tailwind 或小型工具類進(jìn)行布局。
- UI 庫最多選用1-2個(gè)。
- 邏輯與 UI 分離，但不進(jìn)行過度抽象。
「但是我的團(tuán)隊(duì)希望一切都模塊化??！」
非常理解，但極簡主義并非完全否定結(jié)構(gòu)，而是：
- 對模塊化保持謹(jǐn)慎。
- 避免過早優(yōu)化。
- 與團(tuán)隊(duì)溝通明確區(qū)分「當(dāng)前真正需要的」與「僅僅是錦上添花」的功能。
想讓組件真正「可復(fù)用」？
很好，先證明它們確實(shí)有復(fù)用價(jià)值，再做抽象化。
你無需親手搭建一切，甚至大部分東西也不需要自己搭。
在2025年，前端開發(fā)最快速的團(tuán)隊(duì)，往往是：
- 懂得簡化，拒絕過度工程化的團(tuán)隊(duì)。
- 能快速分辨哪些組件值得抽象，哪些應(yīng)保持簡單的團(tuán)隊(duì)。
- 重視清晰性與可維護(hù)性的團(tuán)隊(duì)。
別再盲目追隨潮流。少一點(diǎn)代碼，多一點(diǎn)效率。
