一、HTML规范
1、标签的自定义属性以data-开头
2、禁止使用id来定义元素样式
3、文档类型DOCTYPE统一使用html5的doctype：
4、页面编码默认使用GBK或者 UTF-8
5、代码缩进，嵌套元素应当缩进一次（即4个空格）
6、复杂模块注释
7、 尽量避免多余的父元素
二、CSS规范
1、 命名规范，命名使用英文，禁止使用特殊字符，禁止包含ad等广告含义的关键字
2、 类名命名语义化，参考.wrap .btn-start .btn-play
3、样式里引入的图片名称小写，且语义化，参考 bg.png icon-play.svg btn-start.svg
4、 避免为 0 值指定单位
5、不要在标签上直接写样式
6、不要使用@import
7、 不要使用!important
三、JS规范
1、模块化，重复代码进行抽象 & 封装
2、可维护、可扩展
3、使用严格的条件判断符。用=代替，用!代替!=，避免掉入造成的陷阱
4、Vue框架相关
（1）基于模块开发，每个Vue组件（模块）专注解决单一问题
（2） vue 组件命名，简约 & 语义化
（3）组件表达式简单化，复杂表达式结合method/computed来写
（4） 组件 props 原子化，尽量避免传对象，优先JS原始类型
（5） 验证组件的 props，提供type和default
（6） 组件结构化，方法、对象等按规则排序，比如字母顺序
（7） 组件事件命名规范，如upload-success、upload-error
（8） 避免 this.refs
（10）使用组件名作为样式作用域空间，限制CSS作用域
（11） 提供组件 API 文档、demo，提高代码可读性
（12）对组件文件进行代码校验。.vue 文件可通过 eslint-plugin-html插件校验代码。vue-cli 默认会开启代码校验功能。
（13）代码安全。网络请求加try catch，防止server接口挂了后前端页面也挂了
（14）性能保障。避免不必要的render、频繁的内存分配、内存泄露等
（15）减少全局引用
5、React框架相关
（1）组件命名规范，组件用大驼峰，组件实例用小驼峰
（2）在 JSX 属性中用双引号，但是在js里用单引号
（3）属性命名规范，props 用小驼峰
（4）避免用数组下标作为 key 属性，推荐用稳定的 ID
（5）当 JSX 标签有多行时，用圆括号包起来
（6）当没有子元素时，用自闭合标签
（7）状态管理规范。项目复杂度较低时，只用state；存在多层传递数据的场景，使用context解决；小规模团队或者开发周期短，使用mobx；团队规模较大或要求对事件分发处理可监控可回溯时，使用redux
（8）使用 const 声明常量，使用 let 声明变量
（9）Hooks只能用于 React 函数组件和自定义 Hook 中；只能用于顶层代码，不能在循环，判断中使用 Hooks
（10）代码安全。网络请求加try catch，防止server接口挂了后前端页面也挂了
（11）性能保障。避免不必要的render、频繁的内存分配、内存泄露等
（12）减少全局引用
四、静态资源规范
1、图片渐进式处理
从小到大 base64、雪碧图、本地、CDN
2、动静分离
静态资源和动态数据隔离
3、图片体积
单图不能超过100KB
五、版本规范
1、react >= 18.0.0
2、vue >= 3.0.0
3、webpack >= 5.0.0
4、node >= 18.0.0
