在网上看到一篇不错的译文，很系统的讲述了写样式时可以如何写得“漂亮”，文中也提到关于样式的管理，这也是我花了很长时间在总结的事，看了这篇文章后，还真有自己动手整理出来的冲动，:) 还是先看看文章吧。
原文名称: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; }
你应该能理解,这个规则是应用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.
03. 体会注释的优点
如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.
提示和标签
这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:
/* Turn off borders for linked images */
img { border: 0; }
时间戳和签名
许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息.
/* Sushimonster Typography Styles Updated: Thu 10.18.07 @ 5:15 p.m. Author: Jina Bolton —————————————————-*/
对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.
组织
在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.
/* HEADER —————————————————-*/
接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”
注释标记
如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”.
/* =HEADER —————————————————-*/
这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在
Stop Design 站点上了解.
参考
将注释作为参考说明不常见但不失为一个有用的方法,一个典型的例子是Steve Smith在他的CSS文档中包含一个为配色而添加的参考信息注释.
/* COLORS Body Background: #2F2C22 Main Text: #B3A576 Links: #9C6D25 Dark Brown Border: #222019 Green Headline: #958944 */
你可以将这个向导性的注释放在CSS文档的顶部以提醒你站点是如何配色的.另一个例子则是将注释作为类目录(index-like)的方法.你可以定义不同的区块以便于你在它们之间快速切换,可能会用到注释标记的用法,下面是一个例子
/* GENERIC HEADER SIDEBAR FORMS TABLES FOOTER / / =GENERIC —————————————————-*/
04.清楚什么时候使用条件注释语句和技巧(hacks)
现在有很大一部分文章会提及CSS技巧(hacks)产生的问题,并且说明在当前所有的Internet Explorer发行版本中为什么要使用条件注释语句.自然而然,肯定会有相左的意见.以前我也一直以为使用条件注释语句会比使用CSS技巧(hacks)好一些,直到最近有太多的例子证明这两种方法都算不得什么好的解决方案.
想象一下,你现在要为一个元素设置最小高度值,对于Internet Explorer 6来说,由于它不支持min-height属性,但是使用height属性就可以达到所要的效果,于是你就创建了一个新的样式表文件,并且在文档标记中使用注释语句来引用它,难道你所做的就只是为了这么一条CSS规则?如果将height和min-height属性放在一个CSS文件中,然后使用小技巧(hack)针对不同浏览器切换属性是不是会好一些?这种情况下,我坚持认为少用条件注释语句为好.
换个角度想一下,如果你放置了多个样式表文件,条件语句可能会使你的调试过程变得困难.如果你要更改一些东西,例如在上面的例子中,你就需要打开多个文件进行修改.很多情况下,对你来说,这将是一个繁重的任务.可以想象一下,如果你在主要的CSS文件中定义的规则,然后在需要3个不同的IE样式表中进行重定义.这些都给后期的工作留下了不必要的烦恼,尤其是如果另外一个开发人员在编辑时没有注意到这些需要重新编写的文件的存在.
假如你现在还在使用条件语句,我推荐你在主样式表中添加一个注释以便后来的开发人员知道IE专有样式规则的存在.当必须编辑height或者类似的属性时,这种方法可以提醒你需要修改的不仅仅是一个文件.
再次提醒一下,如果你使用CSS Hack 的方法,浏览器更新带来的更改可能对今后的工作带来影响,你现在使用的Hacks可能在下一个版本中就无法工作了.
05.组织选择符和声明
经常的,要保持CSS的整洁度和有序性.我喜欢将选择符按照样式的类别进行组织划分.
- 重置样式(reset styles)
- 排版样式(typography styles)
- 布局样式(layout styles (header, content, footer, etc.))
- 模块和widget样式module or widget styles
- 其他(etc).
然后,在每个组里面,我按照DOM等级将选择符组织划分:
- 任何父级元素样式(any parent styles)
- 块级元素样式(block-level element styles) (段落,列表等.)
- 内联元素样式(inline element styles) (链接,缩写等.)
- 其他(etc).
然后在上面划分的基础上进行详细的划分:
- 段落(paragraphs)
- 引用(blockquotes)
- 地址(addresses)
- 列表(lists)
- 表单(forms)
- 表格(tables)
- 其他(etc).
最后,我按照样式类型组织CSS声明
- 位置样式(positioning styles)
- 浮动/清除浮动样式(float/clear styles)
- 显示/可见样式(display/visibility styles)
- 空间样式(spacing styles)(margin, padding, border)
- 尺寸样式(dimensions styles)
- 排版相关样式(typography-related styles)(line-height, color, etc.)
- 其他样式(miscellaneous styles)(list-style, cursors, etc.)
许多人喜欢根据声明的字母顺序来排列,这种方法对我来说可能不太适合,但可能对你来说会非常适合.不过一旦你选择了任何组织方法,就最好坚持下去以保持其统一性.
06. 创建框架(framework,库)
当你在编写CSS时,如果你已经发现你经常反复的做同一件事情,考虑一下创建一个框架或库可能是个不错的主意.将一个样式表组合组成的框架作为你的网站的基础能够缩短的你开发时间.较为典型的样式表基本上都包含以下内容:
- screen.css – 一个screen CSS文件包含你所有应用在屏幕显示上的所有样式,可以选择性的导入附加样式,如以下样式表文件:
- reset.css – reset CSS文件被用于重置所有默认的浏览器样式,让我们更容易的完成各种浏览器下的兼容性问题.
- typography.css – typography CSS文件被用来定义字体,大小,行间距,字间距和字体颜色.
- grid.css – grid CSS文件被用来组织布局和结构.通过定义基本的头部,底部和列设置为你网站的创建轮廓,线框模型(winframe)
- print.css – print CSS文件包含页面被打印时显示的样式.
一个CSS框架的例子是由 Olav Bjørkøy 创建的 Blueprint framework ,开发人员主要为 Jeff Croft 和 Eric Meyer 等人.另一个流行的框架就是 Yahoo! User Interface Library 建立的.不过许多开发人员认为这些成型的框架包含的标记和CSS有那么一点臃肿,当然也包括了太多的表现类(class)和属性名称.
声明:当我在写这篇文章时,Jeff Croft发表了一篇主题为 What’s not to love about CSS frameworks? (什么让你摒弃CSS框架),在这篇文章的评论中和谈及他听说许多人说我严重反对CSS框架,我不知道这从何说起,但是我仍然要重申一下我的观点,我不反对使用CSS框架,并且非常坚持使用它们.
最好的结果就是你最好创建适合自己或者你所在组织的框架.
07. 保持文档可读性和性能优化的平衡
每个开发者的样式风格可能不尽相同.许多开发者书写的样式表文件具有很好的可读性,并且会在把文件正式上传之前进行一些性能优化措施,例如移除注释,空白,缩进以及换行等步骤.这是一个不错的方法,也值得推荐.尽管如此,在某些情况下如果你不能进行那些步骤的时候,最好找到一个能够保持文档可读性和性能优化平衡的方法.对此,“Steve Smith”:http://orderedlist.com/articles/single-line-css 有一个不错的建议.
另外,考虑一下使用连字符号替换下划线,微格式( Microformats )将连字符号作为标准的分割符号,不过某些特定的老版本浏览器在处理上可能有问题.你可以阅读一下 Underscores in class and ID Names (类和ID中的下划线)这边文章来了解更多信息.
08. 管理文本编辑器
每个艺术家都会对使用他所了解的适合他们的工具,对于设计者和开发者来说也是如此.对于CSS,最好了解你所使用的编辑器.
现在有很多的文本编辑器可以使用,如TextMate,Coda,BB Edit,TextPad,Dreamweaver等,我在这里不是要告诉你选择那一个编辑器.每个编辑器都有自己的优势和劣势,最适合的编辑器取决于你的偏好.不过,一旦你选择了一个编辑器,最好把它了解的清清楚楚.例如快捷键时什么,有那些能用到的提示和技巧等等.
管理好文本编辑器时加快开发速度最好的方法.它会让你在创建样式表时更有效率.
09.使用版本控制
平滑维护是创建性感的样式表中关键的步骤.版本控制能帮上你不少的忙,它不只是对小组开发有用,对单独的设计者和开发者来说也很有用.
许多应用程序内置了源代码控制机制,Dreamweaver使用 登记/登出系统帮助开发人员确认所编辑的文件不是已经编辑过的文件,而同步功能可以将本地文件和远程文件进行同步,合并和替换.这些功能很容易上手,但在某些地方还是有不足之处.
Subversion (SVN) 和 Concurrent Versions System (CVS) 提供了更为强大的功能.通过附加的功能,你可以进行恢复,查看更改以及解决冲突等操作.这里有Jonathan Snook的一篇叫做“Hosted Subversion”的文章,你可以阅读以获取更多的如何快速简便的去操作它的方法.
10. 创建和管理样式表向导文档
在某些情况下,样式表向导文件是开发人员对语法规则和书写标准所编写的指导性文档,它常用被用作设计,开发和内容的大纲来使用.编写样式向导文档是为清楚的表达排版,网格,颜色,图片尺寸等内容而创建的参考手册.
创建样式表向导文档的时候,最好的办法是提供一个标记和CSS的参考性内容.这些参考可以被开发小组或者后期的开发人员当作手册来使用.另外,它还可以包含布局定义,在里面你可以列出所使用的不同布局以及相关的标记和样式.
最后,你所需要做的是一些开发者保证质量的必要步骤,例如检测有效性和可用性以便保证生产出高质量的产品.