前端开发 命名规范

CSS

使用 BEM 命名规范

BEM 是块（block）、元素（element）、修饰符（modifier）的简写

• 中划线 '-' ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

• 双下划线 '__' ：双下划线用来连接块和块的子元素。

• 双中划线 '--' ：单下划线用来描述一个块或者块的子元素的一种状态。

• 例子 ：头部导航栏子元素被选中后的状态 header-nav__item--active，命名长度尽量控制在三个之内

• UnoCss : 使用 UnoCss 时一个元素里避免同时出现 属性预设和 class 类名的写法

JS

变量 ：使用小驼峰命名 const maxCount = 10

常量 ：使用全大写字母命名，通过 单下划线 '_' 区分单词 const MAX_COUNT = 10

类 ：使用大驼峰式命名 class DemoClass {}， 类的私有变量使用 单下划线加小驼峰命名 const _maxCount = 10

函数 ：使用小驼峰命名 fnName() { doSomething... }

Vue Hook : 使用 use + 大驼峰 命名，例如 useDoSomethingDemo

文件

文件夹/文件名 ：使用小驼峰命名

图片 ：使用 中划线 '-' 分隔单词，例如 home-banner-bg.png

Vue 页面级文件 ：小驼峰命名，例如 home.vue, somethingDetail.vue, 不要出现其它分隔符号，禁止出现 something-detail.vue 这种文件命名

Vue 组件级文件 ：大驼峰命名， 例如 HeaderSidebar.vue, 不要出现重复的命名，当前项目使用自动引入，重复的文件名会有冲突。