“极简开发”
之前接手一个老项目，打开组件文件夹直接看懵了： Button.js 、 PrimaryButton.js 、 GhostButton.js 堆了十几个，点进去一看，大部分代码就差个颜色或边框样式。改个按钮圆角，得在四五个文件里找对应代码，折腾一下午还出了兼容问题。后来换成“极简开发”思路，不仅效率提上来了，代码维护也轻松多了。
先踩坑：过度抽象有多坑人？
刚开始写前端，总觉得“组件化=多抽象”，结果踩了一堆没必要的坑：
- 为了“复用”提前写了个通用弹窗组件，加了十几种配置项，结果整个项目只用了2次，后续改样式时，光理清楚配置逻辑就花了1小时。
- 写页面时非要把“头部标题”“侧边按钮”拆成独立组件，最后页面嵌套了5层，调试时找个DOM元素得翻三层组件树。
- 用BEM命名法写CSS，搞出 .dashboard__nav__item--active--hover 这种长到记不住的类名，后来改布局直接全重写了。
直到领导催着上线新功能，我实在没时间维护这些“冗余组件”，才开始琢磨：前端开发的核心是解决问题，不是搞“代码艺术”，没必要为了“看起来专业”做无用功。
极简开发的3个核心玩法，新手也能直接抄
摸索出套路后，我现在写代码快了不少，分享3个亲测好用的技巧：
1. 组件抽象：不到2次复用坚决不拆
这是最关键的一条——别提前预判“可能会复用”，等组件真的被用到第2次再抽象。比如做表单页面时，“用户名输入框”“密码输入框”刚开始直接写在页面里，后来另一个页面也需要类似输入框，再把共性的样式、校验逻辑抽成 BaseInput 组件。
现在我的组件文件夹里，单个组件复用率都在3次以上，再也没有“写了不用”的闲置代码。而且用Tailwind直接写样式类，省了单独的样式文件：
html
<!-- 不用单独建组件，直接写样式 -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-md">提交</button>
<button class="px-4 py-2 border border-blue-600 text-blue-600 rounded-md">取消</button>
2. CSS精简：用实用类代替“命名焦虑”
以前写CSS总在“起名字”上纠结，现在换成Tailwind这类实用类CSS，效率直接翻倍：
- 不用再想“这个容器的类名叫什么”，直接用 flex items-center justify-between 搞定布局，代码写完样式也调好了。
- 避免了样式冲突，以前改一个页面样式不小心影响其他页面，现在样式都写在元素上，针对性极强。
- 不用频繁切换HTML和CSS文件，上下文不中断，写页面的流畅度提升太多。
比如之前要写5行CSS的导航栏，现在一行类名就搞定：
html
<!-- 实用类CSS，清晰又高效 -->
<div class="flex items-center justify-between p-4 bg-gray-100 shadow-sm">
<h1 class="text-xl font-semibold">首页</h1>
<a href="/login" class="text-blue-600 hover:underline">登录</a>
</div>
3. 拒绝造轮子：优先用成熟无样式组件
别再自己手写模态框、下拉菜单了！2025年有太多成熟的无样式组件库，比如Headless UI，既能满足无障碍规范，又能自由定制样式，比自己写的靠谱多了。
以React项目为例，安装后直接调用组件，样式用Tailwind配：
jsx
// 用Headless UI的弹窗，不用自己写逻辑
import { Dialog } from '@headlessui/react';
function MyDialog() {
return (
<Dialog>
{/* 弹窗触发按钮 */}
<Dialog.Trigger class="px-4 py-2 bg-red-500 text-white">删除</Dialog.Trigger>
{/* 弹窗内容，样式自己配 */}
<Dialog.Panel class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 bg-white rounded-lg">
<p>确定要删除吗？</p>
<Dialog.Close class="mt-4 px-4 py-2 bg-gray-200">取消</Dialog.Close>
</Dialog.Panel>
</Dialog>
);
}
这样既省了写弹窗显示隐藏、点击空白关闭的逻辑，又能保证样式符合项目需求。
极简不是摆烂，是“聪明的取舍”
有人说“极简开发会让代码变乱”，但其实只要把握好“必要边界”就不会有问题：该抽象的组件（比如复用多次的表格）好好抽，没必要的冗余（比如只改颜色的按钮变种）坚决砍。
现在我维护的项目，代码量比之前少了近40%，新同事接手时不用花一周理组件关系，改需求时找到对应代码就能改。前端开发不该被过度工程化绑架，少写点没必要的代码，才能把时间留给更核心的功能实现。