少写代码与组件的理由

让我们开门见山：你可能根本不需要那个Button.js、PrimaryButton.js、OutlinePrimaryButton.js和MaybeIfItsFridayButton.js。

2025年，我们正淹没在抽象概念中。原子化设计系统。过度设计的组件库。

一个专为妈妈食谱网站打造的全套设计系统。

是时候聊聊反潮流话题了：前端极简主义。

这不是什么开发者小众宣言。

这是我通过更快交付、更少调试、并在”初始发布兴奋期”消退后仍保持项目可维护性所学到的经验。

前端极简主义究竟是什么？

不是”不写代码”。而是”只写必要的代码”。

它意味着：

• 更少的冗余组件
• 更精简的CSS
• 智能默认值优于配置过载
• 更多语义化HTML，更少患有冒名顶替综合症的div

重点在于优先思考清晰度和可维护性，而非让所有东西都”可复用”（即使实际上只用了一次）。

问题一：过度抽象陷阱

我们都干过这种事：

button.js

然后中途某个时刻：

<Button>Submit</Button>

但营销部门目前想要幽灵按钮。

于是你创建了GhostButton。

接着有人要绿色行动按钮。

目前就有了PrimaryButton、SecondaryButton、CTAButton，还有让人头疼的维护工作。

该怎么办？

使用Tailwind（或CSS变量，如果你坚持的话），并在需要时直接应用类名…直到你感受到重复的摩擦。

除非你在开发跨多个项目或团队使用的设计系统，否则不需要抽象按钮。

指南：如果某个组件还没被复用两次，先别急着抽象它。

问题二：CSS泛滥

我们继承了一种对CSS的恐惧文化。我们像2013年那样与级联、特异性和盒模型搏斗。然后为了修复所有破坏，写一个400行的global.css来重置一切。

2025年，你可以这样做：

css泛滥

使用Tailwind（或实用优先CSS）来避免”给所有东西命名”的游戏。

<div class="flex items-center justify-between p-4 bg-gray-100">
  <h1 class="text-xl font-semibold">Dashboard</h1>
  <button class="text-sm text-blue-600">Logout</button>
</div>

减少上下文切换。

减少在
.dashboard__nav__left–button-alt中的滚动查找。

问题三：重新造轮子（还造得不好）

别再自己做模态框了。

没错，我说的。2025年不是自己动手做无障碍友善模态框的年份，除非你真的需要。

使用无样式UI库，而不是完整的组件牢笼。

npm i @headlessui/react

然后插入干净的东西：

headlessui

不要对抗规范。

使用尊重浏览器能力的工具，而不是用影子DOM把它搞死。

前端极简主义实践

我目前默认这样做：

• 尽可能使用原生HTML元素
• 在组件被复用2次以上之前避免创建组件
• 使用Tailwind CSS或小型实用类进行布局
• 最多坚持使用1-2个UI库
• 保持逻辑与UI分离——但不过度抽象

“但我的团队想要所有东西模块化！”

完全合理。但极简主义不意味着没有结构。它意味着：

• 有意识地决定什么需要模块化
• 避免过早优化
• 与团队沟通什么是真正需要的，什么是”暂时想要但非必需的”

想让你的组件可复用？

很好。先证明它们的确 可复用。然后再抽象。

你不必构建所有东西。你甚至不必构建大部分东西。

2025年，最快前端团队的特点是：

使用更少组件

编写更少CSS

拥抱原生HTML

信任现代库来处理繁重工作

不再过度思考他们的Navbar.jsx

**_你少写代码不是由于不在乎。

你少写代码正是由于在乎。_**

如果你喜爱这篇文章，学到了东西，或者只是稍微翻了个白眼，请留下评论，点个赞，并关注我获取更多关于2025年更理智前端开发的想法。