学习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是同样的仍是不同的，到底应用了哪条样式，还有没有公共的样式+_+？（模块这个东西看起来很悬，不一样人理解可能也有误差，可是你只要用着舒服就好了，写多了，你就知道到底怎么按模块化来写代码了）