学习CSS你必须踩得那些坑（三）

BEM

BEM 其实很简单，有点面向对象编程的意思，不过比OOP还简单直接。只要记住，BEM是由Block(块)，Element(元素)，Modifier(修饰符)组成，__连接Element，--连接Modifier；你把代码按照模块来组织。举个例子：

.person{}

.person__avatar{}

.person__avatar--round{}

我们有一个person的Block，每个人都有头像、名字、描述之类的，所以我们用到.person__element；头像我们可能需要方的、圆的……都需要对这些进行单独设置，所以这时候对每个元素就用到Modifier。代码非常扁平是不是，如果按照我们以前的写法，可能就是这样：

.person{}

.person .avatar{}

.round{}

好像除了长一点，没什么区别呀！
那现在加一个动物，加个狗吧：

.dog{}

.dog .avatar{}

.round{}

现在有个人养了一条狗，我们的HTML是这样：

<div class  = "person">

    <div class = "avatar"></div> <!-- 人头 -->

        …

 

    <!-- dog -->

    <div class = "dog">

        <div class = "avatar round"> <!-- 狗脑 -->

    </div>

</div>

有没有晕乎乎的感觉，这两个avatar是一样的还是不一样的，到底应用了哪条样式，还有没有公共的样式+_+？（模块这个东西看起来很悬，不同人理解可能也有偏差，但是你只要用着舒服就行了，写多了，你就知道到底怎么按模块化来写代码了）