CSS教程:创建性感的CSS样式表(2)
03. 体会注释的优点
如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.
提示和标签 Webjx.Com
这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:
IT教学网
/* Turn off borders for linked images */
img { border: 0; }
时间戳和签名 IT教学网
许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息. IT教学网
/* Sushimonster Typography Styles Updated: Thu 10.18.07 @ 5:15 p.m. Author: Jina Bolton —————————————————-*/
Webjx.Com
对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.
组织
在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.
/* HEADER —————————————————-*/
接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”
注释标记
如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”. Webjx.Com
/* =HEADER —————————————————-*/
这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在
Stop Design站点上了解.
参考
Webjx.Com
将注释作为参考说明不常见但不失为一个有用的方法,一个典型的例子是Steve Smith在他的CSS文档中包含一个为配色而添加的参考信息注释.
/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green Headline: #958944
*/
Webjx.Com
你可以将这个向导性的注释放在CSS文档的顶部以提醒你站点是如何配色的.另一个例子则是将注释作为类目录(index-like)的方法.你可以定义不同的区块以便于你在它们之间快速切换,可能会用到注释标记的用法,下面是一个例子 Webjx.Com
/* 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或者类似的属性时,这种方法可以提醒你需要修改的不仅仅是一个文件.
Webjx.Com
再次提醒一下,如果你使用CSS Hack 的方法,浏览器更新带来的更改可能对今后的工作带来影响,你现在使用的Hacks可能在下一个版本中就无法工作了.