CSS 的设计模式(二)BEM 与 SMACSS
![CSS的设计模式(二)BEM与SMACSS](https://static001.geekbang.org/infoq/fe/feae2d24216ce3833bffe6d99cd2258b.png)
大家好,今天我们要聊的是 CSS 的设计模式中的 BEM 和 SMACSS,废话不多说,开干。
CSS 的设计模式
BEM
BEM:全称(BlockElementModifier)
由块(Block)、元素(Element)、修饰符(modifier)三部分构成
通过
_
与--
连接块(Block):独立实体,独立的意义
元素(Element):block 的一部分,没有独立意义
修饰符(modifier):block 或 element 上的标记
下图是网页的一部分:
![](https://static001.geekbang.org/infoq/3f/3fc1aeefa5af6f01ed545831672b1060.png)
那我们怎么给每部分起名字呢?
如图:
![](https://static001.geekbang.org/infoq/d0/d04819a80b2fb20c1654a6313f674625.png)
看完发现,这不就是上一章说的 OOCSS 吗?
没错,你可以认为它是进阶版的 OOCSS。
那我们为什么要这么写呢?
很显然,这样的写给我们带来了两个好处:
模块化
块样式永远不依赖于页面上的其他元素,因此你不会遇到级联问题。你还可以将已完成项目中的块转移到新项目。
可重用性
以不同方式组合独立块,并智能地重用它们,减少了你必须维护的 CSS 代码量。有了一套样式指南,你可以构建一个块库,使你的 CSS 超级有效。
SMACSS
SMACSS 设计模式和前两种都不一样,它带来了什么呢?
分类:Base、Layout、Modules、State、Theme
好处:易维护、易使用、易复用、易扩展...
命名规范:.l-header、.is-hidden、.theme-nav
如下图:
![](https://static001.geekbang.org/infoq/8a/8a6600df75d30bab1771a6fb2f56c115.png)
首先要声明五个通用样式,根据自己的需求实现通用样式的内容。
然后引入:
![](https://static001.geekbang.org/infoq/3a/3a0609ddb9e83b4920b94fd79066e5af.png)
具体的样式呢?
![](https://static001.geekbang.org/infoq/0c/0c5d2b6dccb318431f744ead5628c33e.png)
通过如上图的样子,实现相应某块的样式。
END~~~
评论