CSS使用BEM命名规范

当你看到一个class的时候，你想得到什么信息？###

这个class用在什么地方，作用是什么？
是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？
class 是否在js中被使用？
...

此时，你最想一眼看到这个class就解决以上所有的问题，而BEM你值得拥有

什么是BEM

BEM（块，元素，修饰符）由 Yandex 团队提出的一种前端 CSS 命名方法论。是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

优势

避免样式冲突
减小名称长度
提高可阅读性
增加样式重用

怎么使用BEM

Block

一个功能独立的页面组件，可以重复使用

块不应影响其环境，这意味着您不应设置块的外部几何形状（边距）或位置

Element

块的复合部分，不能单独使用

元素全名的结构为 block-name__element-name

一个元素始终是块的一部分，而不是另一个元素，因此元素名称不可定义为 block__elem1__elem2 的层次结构

元素始终是一个块的一部分，您不应该与该块分开使用

Modifier

定义块或元素的外观，状态或行为的实体

Boolean
修饰符全名的结构遵循以下模式：
- block-name_modifier-name
- block-name--modifier-name
- block-name_element-name_modifier-name
- block-name_element-name--modifier-name

Key-value
修饰符全名的结构遵循以下模式：
- block-name_modifier-name_modifier-value
- block-name_modifier-name--modifier-value
- block-name__element-name_modifier-name_modifier-value
- block-name__element-name_modifier-name--modifier-value

不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观，行为或状态，而不是替换它

在修饰符和元素名称中添加块名称的好处

有助于减少一个块的元素和修饰符对另一个块的实现的影响
可更清楚的知道修饰符应用于该DOM节点上的哪个实体
唯一名称使查找代码或文件系统中的实体变得更加容易

什么时候应该用 BEM 格式

使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。
并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。
比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：

.hide {
    display: none !important;
}

命名规范

双下划线风格 block-name__elem-name--mod-name--mod-val

名称以小写拉丁字母书写。
BEM实体名称中的单词由连字符（-）分隔。
元素名称与块名称之间用双下划线（__）分隔。
布尔修饰符用双连字符（--）与块或元素的名称分隔。
修饰符的值与其名称之间用双连字符（--）分隔。

（重要提示： 注释（--）中的双连字符可能会在HTML文档验证期间导致错误。）
CamelCase style blockName-elemName_modName_modVal

名称以拉丁字母书写。
名称中的每个单词都以大写字母开头。
块，元素和修饰符名称的分隔符与标准方案中的相同

React命名范式 BlockName-ElemName_modName_modVal

名称以拉丁字母书写。
块和元素的名称以大写字母开头。修饰符的名称以小写字母开头。
名称中的每个单词都以大写字母开头。
元素名称与块名称之间用单个连字符（-）分隔。
修饰符的名称和值之间的分隔符与标准方案中的相同。

没有命名空间样式 _available

名称以拉丁字母书写。
修饰符之前不包括块或元素的名称

此命名方案限制了mixs的使用，因为它无法确定修饰符属于哪个块或元素。

命名名称使用简写

命名名称使用全写

常用的CSS命名

vant 组件 css 命名
使用的命名是双下划线风格：block-name__element-name--modifier-name

weui 组件 css 命名
使用的命名是 React命名风格：block-name__element-name_modifier-name


    
        Button
        按钮
    
    

        
            页面主操作
            页面主操作
            页面次要操作
            警告类操作
        
        ....

校验 BEM 规范工具

stylelint-selector-bem-pattern