BEM样式使用规范

Posted 2021-03-22 zhukaijie

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

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

官方地址

点击查看

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

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

  • type-block__element--modifier

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

  • block__element

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

  • block--modifier block__element--modifier

参考案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!-- 某个块 --> <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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

常见问题汇总

BEM中常见问题及如何避免