组件开发规范：别让小问题拖垮整个系统

前几天同事上线了一个新功能，页面崩了。排查半天发现，问题出在一个按钮组件上——样式冲突，事件绑定错乱。说白了，就是没人按规矩来写组件。

为什么要有组件开发规范？

你家装修，水电工和泥瓦匠各干各的，最后马桶装在厨房里，你说气不气？组件开发也一样。前端项目越来越大，几个人甚至几十人一起维护，没有统一的规范，写出来的代码就像菜市场吵架，谁也不服谁。

一个按钮，在A页面是蓝色圆角，在B页面变成红色直角；同一个表单校验逻辑，每个页面都重写一遍。时间一长，改个颜色要改十几个文件，加个功能怕出问题干脆复制粘贴。这不是开发，是拆弹。

命名不是小事

别小看命名。看到 Component1、utils、temp 这种名字，就知道这项目迟早要翻车。组件名得清晰表达用途，比如 UserAvatar、SearchInput，而不是 Box 或者 MyComponent。

样式类名也一样。用 BEM 规范，比如 btn、btn--primary、btn__icon，一看就知道层级和作用。别搞 red-text 这种语义模糊的类名，万一哪天改成蓝色，代码就成“历史遗留谎言”了。

Props 定义要像合同

组件接收什么参数，必须写清楚。Vue 里用 props 明确声明类型和默认值：

props: {
  type: { type: String, default: 'button' },
  disabled: { type: Boolean, default: false },
  onClick: { type: Function }
}

React 也类似，配合 TypeScript 更靠谱：

interface ButtonProps {
  type?: 'button' | 'submit';
  disabled?: boolean;
  onClick?: () => void;
}

别留模糊地带。哪个参数可选，哪个必传，类型是什么，文档里写清楚，调用的人才不会踩坑。

样式隔离是底线

别让组件的样式污染全局。用 CSS Modules 或 scoped style，确保你的 .title 不会把别人页面的标题也变大。实在要用全局样式，单独建个 global.scss，白纸黑字列出来，谁改了都得打招呼。

测试不是摆设

一个组件上线前没测过交互、边界情况，等于裸奔。写几个简单测试，比如按钮禁用状态下点不点得动，输入框传空值会不会报错。用 Jest + Vue Test Utils 或者 React Testing Library，几分钟就能跑一遍，比手动点十遍强。

文档不是形式主义

写完组件，顺手在 README 里写两行怎么用。加个示例代码，标出关键参数。新人来了不用问东问西，直接抄就行。你省时间，他也省时间。

规范不是为了管人，是为了让人少加班。一套清晰的组件开发规范，能让团队从“救火”变成“盖楼”。别等系统崩了才想起这事，现在就开始定规则，哪怕只有三条，也比没有强。