原文名称:Creating Sexy Stylesheets
原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升款式表的成效和可维护性,以及设计蓝图和管理任务流程都是任务的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

接下来,我将重点放在创建性感的款式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写理想上就曾经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美好的事情.

那么怎样创建这些性感的款式表?款式表应该具有那些特征呢?

几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在预备我的演讲报告时,我调查了12位任务在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我本人的任务经验,我编写了下面的一个列表用来在创建款式表的时候给予本人以适当的提示.

01. 保持CSS脱离标记

使用链接或者导入款式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里仍然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的款式出现而变得芜杂无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联款式这样一些”快速修补”的方法.一些年过去了,习惯仍然…,直到有一天你被告知这个站点需求重新设计,但是所有的内容仍然不变,这个时候而你只要一个星期去完成.想象一下,这将是一个怎样的境况.

其实这是很普遍的情况,更新款式表是一个再简单不过的任务,在你几年的”快速修补”之后,这些款式遍及了整个站点,置信你基本没办法记住他们在那里.所以如今你面对的只要2个选择a)在一个星期之内找出一个方法去清理规整这些款式b)找一份新的任务吧.

千万不要将你的任务变得愈来愈困难.使用链接和导入款式表是你的不二之选.规范的创建并保持款式表的整洁,你会活得更容易一些.

提示:小心使用链接或导入的方法会在标记上添加冗余的款式.每次你创建新的款式表,你都会更新要不就是添加新的款式,过多的外联款式不只会使补丁的修复变得困难,也会使款式表更难于维护.因此可以理解为什么大型站点会为不同的区块部分而去分离款式表.小心不要玩过火了,过犹不及.

这里很值得提及一下的是过多的款式表将会使HTTP的请求数添加.这些都会潜在的影响功用.因此,Internet Explorer将链接的款式表数限制在了32个.

02. 语法不是猜字谜.

你应该明白为什么我会说到这个.语法学是你最好的朋友,选择合适的,有意义的元素去描述你的内容,确保你所选择的是富有语意的类(class)和ID特征值.做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此.看一下下面的这条规则:

.l13k { color: #369; }

如果你是刚接手这个任务,你在CSS文件中看到了上面的内容,你能不能说清楚这个类是什么意思?大部分情况下你都会说不.这个类的名称可能是个缩写,但是恐怕没有办法去弄清楚他到底是什么的缩写,眼前是一摸黑.或者是这种情况,可能是你把它放到这里,你如今很清楚它是什么意思,但是你能保证3年之后你还记得它是什么意思么?

如今我们看一下下面的规则:

.left-blue { color: #369; }

你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的,这时它就正确的表达了一定的语意.正如我在上面提到的,一旦要你在在一周内要重新设计,但是在重构过程中,这个区块需求定位到左边,颜色变为红色,类的特征值就没有任何意义,所以你如今需求改变你所有的特征值,要不就什么都不改变,不过这样可能或导致重重的困惑.

因此处理上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度,高度的尺寸值.同时你也尽量的避免去使用任何表明表现方式的值,例如box.反之,将表现和内容分离的意义也就不复存在了.

最后,我们看一下最合适的命名规则:

.product-description { color: #369; }

你应该能理解,这个规则是使用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.