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

这篇文章将为大家详细讲解有关CSS如何使用BEM命名规范，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司-专业网站定制、快速模板网站建设、高性价比泗县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式泗县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖泗县地区。费用合理售后完善，十多年实体公司更值得信赖。

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

优势

怎么使用BEM

Block

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

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


< div  class = "header" > 


< div  class = "red-text" >

Element

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

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



    
    
    Search

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



    
        
        Search

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


    
    
    Search





Search

Modifier

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

修饰符的两种类型

Boolean

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


    

    
    Search

Key-value

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


    

    
    Search

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



    
    Search




    
    Search

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

什么时候应该用 BEM 格式

.hide {
    display: none !important;
}

命名规范

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

CamelCase style
blockName-elemName_modName_modVal

React命名范式
BlockName-ElemName_modName_modVal

没有命名空间样式
_available

常用的CSS命名

例子

vant 组件 css 命名

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