CSS 书写顺序
BEM解读:block、element、modifier
BEM书写好处
- 避免样式冲突
- 减小名称长度
- 提高可阅读性
- 增加样式重用
规范默认有以下的几个约定,实际使用可自行统一,重在思想:
-
中划线:仅作为连字符使用--
双中划线:表示不同状态或不同版本__
双下划线:双下划线用来连接块和块的子元素
Block
一个功能独立的页面组件,可以重复使用
例如:
< div class = "header" > </ div >
Element
块的复合部分,不能单独使用,元素全名的结构为block-name__element-name
一个元素始终是块的一部分,因此元素名称不可定义为 block__elem1__elem2
的层次结构
遵循 block-name__element-name
<div class="search-form__content">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</div>
</form>
search-form__content__button 不遵循 block-name__element-name
<div class="search-form__content">
<input class="search-form__content__input">
<button class="search-form__content__button">Search</button>
</div>
Modifier
定义块或元素的外观,状态或行为的实体
。。。
最后一问:需不需要遵守BEM命名规范写css,还是按照自己的习惯写css??怎么简单怎么来?