BEM
2018-11-25 本文已影响0人
土坡飞机
如何写出工整、易维护的css代码
现在的问题
<div class="warp">
<div class="production">
<span class="img"></span>
</div>
<div class="description">
<span class="text"></span>
</div>
</div>
.warp{}
.production{}
.img{}
.description{}
.text{}
这样写的几个坏处
-
没有层次
-
很难维护
-
不美观
什么是 BEM
block element modifier
/* Block component */
.btn {}
/* Element that depends upon the block */
/* 也就是组成block的元素 */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
把这些用在HTML里
<a class="btn btn--big btn--orange" href="http://css-tricks.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>
这些是不是BEM？
.nav .nav__listItem .btn--orange {
background-color: green;
}
<a class="btn" href="http://css-tricks.com">
<div class="nav__listItem">Item one</div>
<div class="nav__listItem">Item two</div>
</a>
答案是：No！请看下面的解释
约定俗成
- 一个样式名必须带有这个block的名字：
btn__price， btn__price--red
1. 如果出现一个词无法形容该block：
# submit的button
submit-button__price, submit-button--yellow
submitButton__price, submitButton--yellow
抽象
# 从CSS角度看： 块和元素的CSS可以写成一种伪代码，然后根据命名约定编译成CSS
.btn {
__price {
}
__text {
}
__label{
__text{
}
}
}
# 那么编译这种伪代码的工具就是scss
SCSS
.btn {
&__price { # .btn__price
}
&__text { # .btn__text
}
&__label{ #.btn__label
&__text{ # .btn_label__text
}
}
}
注意事项
Never overriding modifiers in an unrelated block.
结构清晰，严格执行 element 和 modifier 与 block 的从属关系
Avoiding making unnecessary parent elements when the child can exist quite happily by itself.
block 嵌套的层次要尽量少（一个层次能搞完的就不要嵌套）
优缺点
优点：
- 分层（结构）清楚
- 易读
- 易扩展
缺点：
由于BEM有很强的结构，重构页面时可能很费劲
注意
BEM规范虽然有很强的逻辑性，让人一下子能看到页面的结构，但是如果层次很深的话就会导致class的名字很长。
所以重用class样式（mixin等）+ BEM 就会让html有很好的逻辑且干净利落的结构
参考文档：
http://getbem.com/introduction/
