高流量网站CSS开发技术

2013/11/13 5218

高流量网站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方案的效率和健壮性更好。

使用工具

使用Chrome的开发者工具、Safari的Web Inspector或Firefox的Firebug等工具能帮助你了解哪些属性优先级更高,哪些属性覆盖了其他属性。这些工具也可以显示用户代理样式表和计算值,即使它们没有在CSS中声明。

使用工具,你仍然需要理解级联的工作原理,但工具减少了调试过程中的痛苦。

本文摘自《高流量网站CSS开发技术》(人民邮电出版社,2013)。要更多了解文章中提到的CSS脆弱性、前端性能优化、设计库、开发工具等内容,可阅读该书相关章节。

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量57万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/pro-css-for-high-traffic-websites

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里