高流量网站CSS开发技术

讲解CSS基础知识、CSS高级技巧、CSS3选择器/属性，以及各种CSS设计模式的图书可谓浩如烟海。本书无意在这些领域标新立异，而是探讨了大型团队或多个团队一同工作的情况，以及处理包含众多页面或子站点且访问量相当可观的网站时，所要面对的挑战。我们不介绍如何用最新最炫的技术实现图片替换或跨浏览器的圆角，而将关注点放在让团队中的新人更容易理解原有代码，并在其上添砖加瓦，让网页中的CSS代码从一开始就经过深思熟虑，且以完善、高效的方式构建。

本书对新手和专家同样有用。不过，若是你已经有一些HTML和CSS的使用经验，或至少熟悉相关语法，那再好不过了。对代码重用、模块化、健壮性和实用性的讨论，将贯穿本书各章。

亚马逊购买《高流量网站CSS开发技术》

本书适合以下读者：

所有在高流量网站工作的人，所谓高流量指独立访问用户数日均1万以上，或峰值超过1万；
所有在大型网站工作的人，大型网站至少要包括2000个独立网页，或30个子网站；
所有在公司负责网站开发的人，所在公司有大量员工在同一个代码库上工作，参与修改CSS的程序员超过30人；
所有在有潜力的公司工作、希望为公司Web开发建立一套良好流程的人；
所有缺少大型团队工作经验的开发人员。

通过阅读这本书，你将了解以下内容：

流程的价值；
如何在员工和团队之间共享知识；
如何尽快让新来的CSS程序员上手工作；
如何将CSS修改纳入构建、部署流程；
如何编写可重用、模块化的CSS；
如何最大限度提升网站性能；
如何保持品牌的一致性；
跨浏览器和无障碍访问的CSS最佳实践；
动态CSS技术。

最后一章提供了一套简单的CSS框架，是我们为本书定制的，其中演示了大量书中讨论过的内容，包括创建这个框架时所遵循的流程。书后的四个附录提供了规范和流程的具体例子，供读者参考。

作者简介：

Antony Kennedy

自2010年6月至今先后在苹果公司担任资深前端工程师和前端设计主管，曾在BBC、BSkyB、Tesco、迪士尼和Channel4等多家公司的高流量网站担任前端研发重要职位。在Web开发技术领域打拼近20年，对CSS、HTML5、JavaScript、敏捷开发和持续交付等具有深刻独到的见解。关于他的更多信息，请查看 http://uk.linkedin.com/in/kennedyantony。

Inayaili de León

Web设计师，目前受雇于Canonical公司（Ubuntu的创建者）。她热衷研究如何在Web设计过程创建清晰、语义化和高效的HTML/CSS。Inayaili热爱Web，热爱自己的工作，享受每天都能获取新知识的生活。她设计的网页简洁、美观、易用，http://yaili.com/ 有她的更多介绍，以及她的一些优秀的设计作品。

CSS选择器的特殊性

使用CSS的时候，要对特殊性（specificity）进行慎重的考虑和规划，在CSS文件较大，频繁需要重写和导入的情况下，更是如此，而这在高流量网站更容易发生。

一条不错的经验法则是，在开始编写CSS文件时，首先使用比较宽泛的选择器，在过程中再酌情增加特殊性。否则的话，工作要困难得多，而且不可避免地会产生过于特殊、无法重用的选择器，以及过于冗长、缺乏灵活性的样式表。

依赖选择器顺序的样式表更脆弱，还可能导致不必要的冗余。当你需要重写某个规则时，你会在文件后面再新建一个同样的规则，然后再在它后面新建，直到你重复一遍又一遍同样的事情。如果样式表的顺序由于某种原因发生变化，你要应用到元素的那些属性（通常是在最后定义的）将会失效，因为它依赖于选择器的顺序。依赖特殊性而不是选择器的顺序，将使得样式表更易于编辑、维护，便于将来进行重构，同时也更健壮。

选择器的特殊性也会影响一个网站的性能，进行DOM（Document Object Model，文档对象模型）查询时，选择器各个部分是按照反直觉的顺序（从右到左）来进行计算的，选择器的特殊性和复杂度越高，对性能的影响越大。

说到底，CSS文件的模块化和灵活性程度，对于较深层的元素是否要采用高特殊性的规则，是由你自己的选择来决定的。然而在团队中，应当将特殊性作为首要关注的问题，来对样式表进行规划。

特殊性计算

在级联计算中指定一个CSS规则的权重时，会首先根据重要性（是否有!importance）和CSS来源对规则进行排序。重要性和来源相同的规则，就按特殊性排列：特殊性高的选择器会覆盖特殊性低的选择器。最后，如果两个选择器具有同样的来源、重要性和特殊性，写在样式表后面的那个规则就会覆盖写在前面的规则。这也适用于单一的属性，因此，如果在同一个规则中多次声明了相同的属性，最后的声明就会覆盖前面的声明。

因为使用@import声明导入的样式表必须要写在其他规则之前，如果在CSS文件后面出现的非导入规则，与导入文件中的规则具有同样的权重，导入规则将被覆盖（因为选择器的顺序，后面的覆盖前面的）。

根据W3C规范（http://www.w3.org/TR/css3-selectors/#specificity），特殊性的计算使用四个字母"a、b、c、d"来代表重要性依次递减，其中：

a 如果该声明是在style属性中定义的，则为1，否则为0；
b 等于id选择器的数目；
c 等于属性选择器、class和伪class的数量；
d 等于元素名和伪元素的数目。

非CSS语法的标记（如font属性），特殊性都归为0。基于这一系列规则，以下选择器的特殊性为 1,0,0,0 （a=1，b=0，c=0，d=0）：

<section style="padding-bottom: 10px;">

因为这里是内联CSS，a=1，其余数字是0。记住，假如在非内联的链接样式表中，有一处带10个id选择器（特殊性为0,10,0,0）的规则，它的优先级仍然不如以上选择器——特殊性的计算不是基于十进制升位的，后面的数再高也不能升到前一位：a=1的规则将始终优先于其他a=0的规则。

以下选择器更复杂一些，特殊性为0,0,1,3（a=0，b=0，c=1，d=3）：

article section h1.title {
    ...
}

因为不是内联的，a=0；因为没有id，b=0；因为有一个class选择器，c=1；因为有三个元素选择器，d=3。

基于这一系列算法来对特殊性进行计算，可能令人望而生畏。但实际上，有了一些经验后，很容易看出一个选择器比起另一个选择器特殊性是高还是低，如有一个或两个id选择器，或其他类似的明显提示。编写CSS时应该小心，如果没有必要，不要创建高特殊性的选择器。如果遇到棘手的情况，类似Firebug或Safari Web Inspector等工具将帮助你了解特殊性如何应用于元素，它们能按照特殊性排序来显示规则，将特殊性更高的规则显示在最上面，并将被特殊性更高的规则覆盖的属性用删除线划掉。有关内容详见第10章。然而应该记住两件重要的事情：内联CSS要比嵌入或链接CSS优先级更高；一个ID选择器要比任意数量的class、属性或元素选择器优先级更高。

!important声明

如果在缩写属性中使用了!important声明，就等于用!important重新逐个声明了每个子属性，而这样可能会导致属性恢复为初始默认值。

例如，假设我们有这样一个选择器：

h1 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
}

然后在样式表的后面有如下声明：

h1 {
    font: 18px Arial, sans-serif !important;
}

其结果将等价于以下声明：

h1 {
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    font-size: 18px !important;
    line-height: normal !important;
    font-family: Arial, sans-serif !important;
}

发生这种情况的原因是，在!imporot声明内，某些属性没有获得明确定义（如本例中的font-style、font-variant、font-weight和line-height），这时，即使较低特殊性的规则已经存在，它们也会恢复到属性规范中所规定的初始值（如本例中的font-style: italic）。

命名空间和特殊性

有一些情况下，高特殊性的选择器是必要的。例如要创建在不同网页、子网站、迷你网站，甚至第三方网站广泛使用的部件和代码片段，常见的做法是对这部分代码采用命名空间，对CSS来说，基本上意味着要通过一个特殊的class、id或class/id前缀，将其分离出来。要对一个页面应用不同的风格，也经常会使用命名空间，这种情况下，我们将为body元素添加一个id或class，例如：

<body>

重要的是要认识到，虽然在为不同页面或页面不同部分创建不同样式时，这是一种常见而简单的方法，但它会影响特殊性。当在CSS里指定这些页面或代码片段时，我们不得不在规则中引入一个class或id，从而增加了它的特殊性，导致它更难被覆盖。例如，在定义了class="home"的页面中，我们想要让h2标题比其他页面更大，可以用以下规则设置：

h2 {
    font-size: 24px;
}
.home h2 {
    font-size: 36px;
}

如果由于某种原因，我们需要在同一网页内再次覆盖此设置，就需要再添加一个class来指定特殊的标题，并创建一个更特殊的规则：

.home h2.highlight {
    font-size: 30px;
}

这样像滚雪球一样，规则的特殊性越来越高，难免会导致CSS不必要的复杂度。应对的秘诀是针对这种情况仔细进行规划。贯穿整站的设计元素要采用的变化越多，这种情况的发生就会越频繁。而如果没有建立一套设计库，或虽然建立了设计库，但更新不及时，这个问题就会更严重。你应该建立一份具有良好适应性的样式表，并定义一组指导标准，告诉开发者如何具体问题具体处理——为了CSS的灵活性，不要用更高特殊性的选择器去反复覆盖。但刻意避免class/id的办法也不适用于高流量网站，在某些时候，class/id方案的效率和健壮性更好。