对比命名风格
- 驼峰命名形式方便引用
- 中划线展示更直观
代码中的命名严禁使用拼音或中英混合的方式
# 项目命名
全部采用 小写方式 , 并以 中划线 分隔。
// bad
mall_management-system / mallManagementSystem / MallManagementSystem
// good
mall-management-system
# 公共组件
公共组件应采用 大驼峰 (用于和普通文件做区分),第三方公共组件保持原样即可。
# 普通文件
普通文件和文件夹全部采用 小驼峰 形式
// bad
script / demo_scripts / demo-scripts
// good
scripts / demoScripts
# 变量、方法名
变量,方法名、参数名等等统一使用 小驼峰 风格。
// bad
local_value / input-use-id
// good
localValue / getHttpMessage() / inputUserId
# css类命名
统一使用 小写形式 命名,并采用 BEM 命名规范,Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex (opens new window) 团队提出的一种前端 CSS 命名方法论。 具体参考 (opens new window)
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
- __ 双下划线:双下划线用来连接块和块的子元素
- --双中划线:双中划线用来描述一个块或者块的子元素的一种状态
WARNING
注意: 修饰符(modifier)使用
--
而不是_
,这里我们以element-ui使用的方式为准。
// bad
.el-input .inner {}
.el-input.success {}
// good
.el-input {}
.el-input__inner {}
.el-button--success {}
.block__element--modifier {}