CSS 类名规范

一、为什么要规范命名

CSS 类名规范的重要性在于：

便于重构

便于开发者理解阅读

便于组织 CSS 模块目录，组件化样式

所以，在你初次写完一个项目的样式后，或许还没能感受到命名规范的重要性，当你在修改别人的代码或者重构项目的时，就能明白，一个条理清晰，定义规范的类名有多么的可爱。这也是命名不规范后，重构时经常吐槽的：重新写一遍样式都比改样式快~

接下来总结常见的命名规范:

二、 BEM

BEM (Block Element Modifier)就是 块，元素，修饰符的缩写。

Block: 独立的实体，它本身是有意义的header, footer, menu, input, container

Element：块的一部分，没有独立的含义，并且在语义上与其块相关联。menu item, list item, checkbox caption, header title

Modifier: 块或元素上的修饰标志。使用它们表示块或元素的状态disabled, highlighted, checked, fixed, size big, color yellow

举个列子，

BEM 官方的命名规则是：将双下划线 double underscore连接块和元素用双短横线 two dashes连接元素和修饰符用短横线作为修饰符多个单词间的连接，用布尔类型的值命名修饰符，形如：active, disable, invisible, collapsed

比如：

可以看出，通过类名我们就清晰地知道这个类名是干什么用的。CSS 是一种把设计规范转化成实际看到样式的一种手段，BEM 能够十分优雅的讲设计规范转行成实际的效果。BEM 核心思想是组件化。一个组件必定是要能从上下文独立出来的。

BEM 的缺点：

类名过长，尤其是初始块的名字就挺长的时候，最终导致样式文件过大

双下划线和双横线不好看~

三、rscss

rscss 是以组件化的方式命名 css 类。命名由(Components, Elements, Variants) 组件、元素、变量组成。同时，尽可能的将嵌套元素有 子代选择器来匹配。以避免后代原则器在重构等场景发生不可控意外。

Components：将系统分割成多个独立的小组件,组件由至少两个单词组成，并有短横线(dash: -)连接,,,

Elements: 每个组件都是由多个元素构成，每个元素应该由一个单词（word）来表达，如果实在需要多个单词，单词之间不加任何连接符,

Variants: 变量有短横线(dash: -)为前缀：因为短横线对打字更友好, 变量单独写 class,,

.like-button {

&.-wide { /* ... */ }

&.-short { /* ... */ }

&.-disabled { /* ... */ }

}

.shopping-card {

> .title { /* ... */ }

> .title.-small { /* ... */ }

}

组件嵌套rscss 建议使用 SASS 风格的 class 写法，将嵌套组件抽离出来，通过和 @extend 的方式复用样式。嵌套应该少于 3 层，避免过度嵌套

换成下面的写法

.search-form {

> .submit {

@extend .search-button;

@extend .search-button.-red;

@extend .search-button.-large;

}

}

组件复用力求把组件复用性提高到最大，为组件编写样式的时候应避免使用位置属性：

Positioning (position, top, left, right, bottom)

Floats (float, clear)

Margins (margin)

Dimensions (width, height) *

某些的确需要固定尺寸的组件可以是例外：头像，徽标，logo某些的确需要定位属性的组件，应该尽量将定位样式赋予父组件

样式文件结构一个组件一个样式文件

# css/components/search-form.scss

.search-form {

> .button { /* ... */ }

> .field { /* ... */ }

> .label { /* ... */ }

// variants

&.-small { /* ... */ }

&.-wide { /* ... */ }

}

通过 glob 匹配全部样式

@import 'components/*';

四、总结

对比 BEM 和 rscss 的规范区别