网站建设资讯

NEWS

网站建设资讯

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





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


    
        
            
                搜索
                
                    
                        
                    
                
            
        
                  ......     

weui 组件 css 命名

使用的命名是 React命名风格:block-name__element-name_modifier-name


    
        Button
        按钮

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

关于“CSS如何使用BEM命名规范”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享题目:CSS如何使用BEM命名规范-创新互联
转载源于:http://njwzjz.com/article/coshgc.html

其他资讯