CSS的BEM命名规范

52 阅读1分钟

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??怎么简单怎么来?