前端开发之Pascal命名规范 & BEM命名规范

Pascal命名规范

与前端开发广泛采用的驼峰式命名发不一样的是，Pascal(帕卡斯)命名法采用的首字母大写，在类、方法（函数）和属性命名的规范上采用驼峰式命名法，在方法上能够选择采用pascal命名法

• 具体用法
  方法命名通常用动词，变量命名通常按功能或方法的返回值命名。如 int max= , GetMax()。

BEM命名规范

Bem 是块（block）、元素（element）、修饰符（modifier）的简写利用不一样的区块，功能以及样式来给元素命名。官网

• 解决问题
  • 光凭class名字就可让其余开发者知道某个标记用来作什么的，明白各个模块之间的关系
  • 组件之间的彻底解耦，不会形成命名空间的污染

1. 语法

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

• __ 双下划线：双下划线用来链接块和块的子元素。
• _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。

2. 用法

• 命名模式为：

.block {}
.block__element {}
.block_modifier {}
.type-block__element_modifier
复制代码

• block 表明了更高级别的抽象或组件。
  block__element 表明 .block 的后代，用于造成一个完整的 .block 的总体。 block_modifier 表明 .block 的不一样状态或不一样版本。

block表明一个组，而element表明组里面的成员，而modifier，虽然在上图没有画出，可是能够知道这个则是用于描述每个元素的具体的属性。

3. 使用

• 何时应该用 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 文件的引用顺序会对最终编译的样式的做用域和优先级产生影响，请尽可能按照由底层到自定义的顺序来引用。

其余前端命名规范

腾讯前端命名规范
网易nec命名规范

参考连接

juejin.im/entry/58e60…?
juejin.im/post/5b925e…