Pascal命名规范
与前端开发普遍采用的驼峰式命名发不同的是，Pascal(帕卡斯)命名法采用的首字母大写，在类、方法（函数）和属性命名的规范上采用驼峰式命名法，在方法上可以选择采用pascal命名法
- 具体用法
方法命名一般用动词，变量命名一般按功能或方法的返回值命名。如 int max= , GetMax()。
BEM命名规范
Bem 是块（block）、元素（element）、修饰符（modifier）的简写利用不同的区块，功能以及样式来给元素命名。官网
- 解决问题
- 光凭class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系
- 组件之间的完全解耦，不会造成命名空间的污染
- 语法
- -中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
- __ 双下划线：双下划线用来连接块和块的子元素。
- _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。
- 用法
- 命名模式为：
.block {}
.block__element {}
.block_modifier {}
.type-block__element_modifier
- block 代表了更高级别的抽象或组件。
block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。 block_modifier 代表 .block 的不同状态或不同版本。
- 使用
- 什么时候应该用 BEM 格式
用在具体组件里，公共样式里使用则非必须
- CSS 预处理器配合使用
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
LESS/SASS书写规范
使用 .less/.sass 后缀的文件来存储变量、混合代码以及最终合并压缩。
| 子less | 注解 |
|---|---|
| lib-base.less | 预定义的变量，例如颜色、字号、字体 |
| lib-mixins.less | 用于混合的代码，例如渐变、半透明的混合 |
| lib-reset.less | 初始化 |
| lib-ui.less | 颗粒化ui功能 |
| xxx.less | 模块样式 |
.less/.sass 文件的引用顺序会对最终编译的样式的作用域和优先级产生影响，请尽量按照由底层到自定义的顺序来引用。
