使用BEM命名规范来组织CSS代码详解编程语言

<!-- 某个块 --> 
<form class="search-form"> 
    <!-- 某个元素 --> 
    <div class="search-form__content-left"> 
        <!-- 错误：不能出现多个元素 --> 
        <h2 class="search-form__content-left__h2">标题</h2> 
        <!-- 某个元素，虽然是子集，保证了只有一级元素 --> 
        <input class="search-form__input"> 
        <!-- 某个元素，加上了hover修饰器 --> 
        <button class="search-form__button search-form__button_hover">搜索</button> 
        <button class="search-form__button-set search-form__button-set_hover">搜索1</button> 
        <!-- 错误：不能单独使用lg修饰器 --> 
        <button class="search-form__button_lg">搜索</button> 
          
        <!-- 块中可嵌套着另一个块 --> 
        <p class="my-img"> 
            <img class="my-img__logo" src="abc.png" alt="image" title="image"> 
        </p> 
          
    </div> 
</form> 
  
<div class="search-result"></div>

.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 {}

/* 避免这样做 .search 不是一个独立的块 */ 
.search { 
    /* 应该把这个块提取出来 */ 
    &-form { 
        &__button { 
            &_hover {} 
              
            /* 应该把这个元素提取出来 */ 
            &-set { 
                &_hover {} 
            } 
        }   
    } 
  
    &-result { 
          
    } 
} 
  
/* 建议这样,按照各级区分出来 */ 
.search-form { 
    &__button { 
        &_hover {} 
    } 
      
    &_button-set { 
        &_hover {} 
    } 
} 
  
.search-result { 
  
} 
  
  
/* 对于嵌套在块中的块，如果非常有必要，可以嵌套写样式 */ 
.search-form { 
    .my-img { 
        &__logo {} 
    } 
} 
/* 但一般来说，不建议，因为这破坏了块的独立性。可转换成设置对应的 元素来表现，如 */ 
.search-form {} 
.my-img { 
    &__search-form-logo {} 
}