BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称

使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）

官方地址

在选择器中，由以下三种符号来表示扩展的关系：

• -中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号

  • type-block__element--modifier

• __ 双下划线：双下划线用来连接块和块的子元素

  • block__element

• -- 双中划线: 双中划线用来连接块和块的修饰状态或者块的子元素和块的子元素的修饰状态

  • block--modifier block__element--modifier

参考案例

     
     
  
        
      
    
           
       
标题
    
           
           
           
       搜索    
       搜索1    
           
       搜索    
           
       
          
  
      
     
     

.search-form {      position: relative;    }    .search-form__input {      font-size: 12px;    }    .search-form__button--hover {}    /* 避免：避免使用不必要的嵌套（此处只是简单的嵌套，没有必要） */    .search-form__content-left .search-form__input {}    /* 稍好的嵌套（此处是在块的theme1修饰器下的子元素，某些时候有必要） */    .search-form--theme1 .search-form__input {}    /* 错误：使用了标签 */    button.search-form__button {}    .search-form button {}

常见问题汇总