我们先直白点：你大概并不需要那些 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年，前端开发最快速的团队，往往是：
懂得简化，拒绝过度工程化的团队。
能快速分辨哪些组件值得抽象，哪些应保持简单的团队。
重视清晰性与可维护性的团队。
别再盲目追随潮流。少一点代码，多一点效率。
前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击原文了解更多详情。
最后：
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读
