关于可重用的 CSS，以及 SMACSS

这几天在熟悉 Pure (Yahoo 做的一个 CSS 可复用代码），阅读文档的过程中了解到了 SMACSS. 记录于此。

 

SMACSS (Scalable and Modular Architecture for CSS) 是一本在线书，是一个关于如何更好的组织 CSS 代码的指南，它不包含具体的 CSS 代码，更多的是对如何更好的模块化和复用 CSS 的思考，非常有价值，值得一读。

http://smacss.com

 

瞄了一眼 Module Rules http://smacss.com/book/type-module 一章，里面包含很多我在多年开发实践中，知道怎样做才最好，但是却没有通过文字化的方式总结出来的一些东西。真是心有戚戚焉。

 

比如 "Avoid element selectors". 像 ".fld span" 这样的 selector 是应该禁止使用的。因为 span 这个 element selector 指定的太 rigid 了，如果这个 .fld 下面以后添加更多一点的 span 呢？那么这个 selector 就 apply 到所有了，这样往往显示就全乱套了。

以后看到类似下面这样的代码：

#mall-list li img{ float:left; margin:5px 10px 0px 5px;}
#mall-list li span {display:block;line-height:22px;}

直接就否了吧，看到这样的基本可以判断不会写结构良好的 CSS.

 

再比如 “Try to avoid conditional styling based on location”. 说的也非常有道理。也就是说，同样结构的一个 html 模块 (或者说组件 component, widget, you name it...)，不应该基于他在不同的页面，或者同一个页面的不同地方，设置不同的样式。

正确的做法应该是子类化（sub class) 这个样式类，也就是说创建一个新的 CSS class 作为这个类的子类名，然后配合起来使用。