目录
什么是BEM
BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区块,功能以及样式来给元素命名。这三个部分使用__
与--
连接(这里用两个而不是一个是为了留下用于块儿的命名)。命名约定的模式如下:
.block{}
.block__element{}
.block--modifier{}
block
代表了更高级别的抽象或组件block__element
代表block
的后代,用于形成一个完整的block
的整体block--modifier
代表block
的不同状态或不同版本
block代表一个组,而element代表组里面的成员
BEM的实例
eg1
//普通命名
.nav{}
.item{}
.blue{}
//BEM命名
.nav{}
.nav__item{}
.nav--blue{}
.nav--item__hand{}
eg2
//常规
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
//BEM
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
BEM与SCSS
现在的开发很多时候都会用到SCSS,那么如果使用SCSS的嵌套写BEM规范呢,在SCSS中可以使用@at-root
:
.block {
@at-root #{&}__element {
}
@at-root #{&}--modifier {
}
}
/*生成的css*/
.block {
}
.block__element {
}
.block--modifier {
}