少写一点，发布快一点：2025年的前端极简主义-CSDN博客

本文链接：https://blog.csdn.net/qq449245884/article/details/148351823

我们先直白点：你大概并不需要那些 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 脚本等专栏，案例驱动实战学习，点击原文了解更多详情。

最后：