CSS如何使用BEM命名规范-创新互联

< div  class = "header" > 


< div  class = "red-text" > 

    
    
    Search

    
        
        Search
    

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

    
    
    Search





Search

Modifier

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

修饰符的两种类型

Boolean

修饰符全名的结构遵循以下模式：

• block-name_modifier-name

• block-name--modifier-name

• block-name_element-name_modifier-name

• block-name_element-name--modifier-name

    

    
    Search

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

    

    
    Search



    

    
    
   

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

    
    Search




    
    Search

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

• 有助于减少一个块的元素和修饰符对另一个块的实现的影响

• 可更清楚的知道修饰符应用于该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

    
        
            
                搜索