[读书笔记] CSS FrameWorks and Integration

这是 《Pro CSS for High Traffic Websites》的第四章,讲的是 CSS 框架与整合。@后面的是提供本书的人,感谢 @zhoupeng

概要

  • 流行的 CSS 框架和 reset 样式表概览
  • 理解 OOCSS(Object Oriented CSS, 面向对象的 CSS,下同) 的原则以及怎么工作
  • 怎么处理重载的 CSS
  • 掌控第三方代码的一些小窍门
  • 理解防守型的 CSS
  • 学习怎么避免创建脆弱的 CSS
  • 领会 CSS 中的 metadata 怎么工作*

CSS 框架

CSS 框架就是 Blueprint960 Grid SystemYUI Grids 之类的东西。使用一个框架做网页,例如:











Header





Sidebar





Main content





Footer





以上可以看出框架的弱点:1、类似表格布局; 2、滥用 div; 3、滥用 class; 4、无意义冗余代码; image_thumb3 图1 使用框架建立的网页类似表格布局 然而,也可以看出框架的优点:快速、规范、适合做网站原型。 此外,由于 CSS 框架提供的 class 应该好多都用不上,书中推荐 Firefox 插件:CSS Usage

reset 样式表

reset 样式表是为了统一网页在更多浏览器中的显示效果,鉴于例如下图所示的情况: image 图2 有的浏览器会自动给 input 加边距 这时若 CSS 规定 input { margin:0 },则上述情况就没有了。负责做这些规定的 CSS 样式即 reset 。 定制错误的 reset 可能带来后期每次都要重载的麻烦,得根据需求定制。例如 li 列表如果大都需要前面的小圆点,就不要在 reset 中:

li { list-style: none; }

若滥用全局选择器,不仅重载工作量增加,和重载它的那些选择器共存还会降低效率。 另外,根据 《High Performance Websites》的 rule One,reset 不要单独成一个文件。

OOCSS

例:

I am a discrete block
I am another discrete block
I am a discrete block
I am another discrete block

特征:1、修改代码不会使其它的出错; 2、控制结构的规则和控制美学的规则要分开(有点点晦涩啊有木有)。 缺点:无意义的使用 class、违反了 CSS 的样式覆盖规则的设计意图(其实我觉得还有一个缺点是看起来很麻烦……)。 总结:OOCSS 只在大网站想要代码健壮和灵活的时候,或者在追求代码一致性时最有意义。 注: HTML5 的新标签可以解决无意义使用 class 这个问题

重载的 CSS

考虑以下两个问题: 1、是使劲重载好呢,还是重新设计好呢? 2、默认样式的优先级有没有设太高? 如果还是需要重载优先级太高的样式,可以采用这种形式:

#home .template-12 #main .col-1 .post img.thumbnail {

border: 1px dotted green;

}

#europe .template-8 aside#secondary ol li img {

border: 1px dotted #333333;

}

注意:本书建议高流量网站不要用 !important 。

与第三方 CSS 代码协作

如果协作很痛苦,请考虑: 重写这个框架,还是换一个呢?大笑 与第三方 CSS 代码共存,可以选择尽量避免冲突,或者尽量超越它们。 避免冲突(推荐): 1、尽量别用 !important ; 2、用简单的 CSS 选择器,不怎么和第三方 CSS 代码冲突的那种; 超越它们: 1、使用高 specificity 的选择器,例如“重载 CSS”的示例代码;2、用 iframe;

防守型的 CSS

在大网站中,使样式不易因误重载而被打乱,可采取的防守措施有: 1、使用 OOCSS(修改某一样式不会影响其它代码正常工作); 2、命名空间,例如“重载 CSS”的示例代码,缺点是缺乏代码可重用性; 3、为关键和脆弱的部分写上注释; image 图3 防守措施-添加不必要的定义 4、添加不必要,却可能因为其它代码的存在而改变的样式属性,配合命名空间使用,如图3。 尤其在 CMS 系统这样由非专业人士参与样式编辑的系统中,防守型的 CSS 显得尤其重要。因为很难控制编辑们的 CSS 代码质量。这种情况下,可提供一系列 class 和 id 定义供编辑选用。定期收集反馈意见并改进它们。

脆弱的 CSS

望文生义,依赖性太强,一不小心就会弄乱的 CSS 就是脆弱的 CSS,例如:

#books img[src=”book-cssmastery.jpg”] {

float: left;

}

#books img[src=”book-webstandards.jpg”] {

float: right;

}

脆弱的 CSS 需要逐步改进,可参考图 4 。 image image image image 图4 一步步改进脆弱的 CSS 终极解决方案还是提早规划好代码,避免出现脆弱的 CSS。 注:老浏览器不支持 a[href$=”.doc”] 这样的属性选择器。

CSS 的 metadata

metadata 就是“数据的数据”。HTML 的 metadata 起描述 HTML 文档的作用:

由于标签定义有限,需要期望 class 或者 id 值来暗示该 HTML 标签可能的用途。甚至,为了 HTML 文档结构的相关性,需要在标签中包含它验证有效性的提示等等信息,例如:

HTML5 的写法无甚问题。传统的却看起来不太正确: 1、json 数据放在 class 内很奇怪不说,使得浏览器每次都从样式表中搜索该 class 是否会增加性能消耗(请问哪位帮忙确切指出这样做对性能的影响)? 2、为什么不自制属性来存放 metadata,比如:datatype=”orderCode”? 本书认为,这种写法是书写正确 HTML 前提下的最好办法,且利大于弊 *。

总结

高流量网站应根据需要建立自己的框架(可参阅第 11 章)。由于 reset 可算最小的框架,所以包括按需自定义 reset 的意思。框架所能给予的灵活性和效率是高流量网站团队无法忽视的。 除去框架,其它原则和编码实践不仅降低出错,更重要的是避免样式被破坏。CSS 代码不会总是隔离的,所以需要提早规划。

后记

《Pro CSS for High Traffic Websites》可以翻译成《高流量网站的专业 CSS》,英文原版出版于 2011 年 4 月 27 日。本章认为高流量的网站(每天 1W UV 以上)追求的是高效和可维护性,因此对 CSS 的要求是灵活、鲁棒、越小越好。然而,由于程序员不可能什么都从最基础写起,外加大网站为了多人协作之便利,往往会有统一的 CSS 规范以及 CSS 框架。而这又牵扯到框架与程序员手写代码,及第三方代码之间扯不清的关系。如何兼顾 CSS 代码质量和这些代码间的关系,是本章所讨论的中心。

  • 注:据说从性能的角度,书中的 CSS metadata 方式并不都是可取的