推荐使用BEM规范
BEM 即 （Block：块、Element：元素、Modifier：修饰符）
block 和 elment 之间以 “__” 双下划线连接
modifier 前以 “--” 双中划线连接
命名形式：.block-name__element-name--modifier
Block 块：逻辑和功能独立的单元，类似于组件。
Element 元素：block的组成部分。
Modifier 修饰符：用于修饰块或元素，体现出外形行为状态等特征。
示例：
<!-- 某个块 -->
<form class="search-form">
<!-- 某个元素 -->
<div class="search-form__content">
<!-- 错误：不能出现多个元素 -->
<h2 class="search-form__content__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-image">
<img class="my-image__logo" src="abc.png" alt="image" title="image">
</p>
</div>
</form>
<!--element：走马灯-->
<div class="carousel">
<div class="carousel__container">
<button class="carousel__arrow carousel__arrow--left">
<i class="icon-arrow-left"></i>
</button>
<button class="carousel__arrow carousel__arrow--right">
<i class="icon-arrow-right"></i>
</button>
<div class="carousel__item"><h3>1</h3></div>
<div class="carousel__item"><h3>2</h3></div>
<div class="carousel__item is-animating"><h3>3</h3></div>
<div class="carousel__item is-active is-animating"><h3>4</h3></div>
</div>
<ul class="carousel__indicators">
<li class="carousel__indicator">
<button class="carousel__button"></button>
</li>
<li class="carousel__indicator">
<button class="carousel__button"></button>
</li>
<li class="carousel__indicator">
<button class="carousel__button"></button>
</li>
<li class="carousel__indicator is-active">
<button class="carousel__button"></button>
</li>
</ul>
</div>
