组织样式和样式表

Organizing Styles and Style Sheets

你已经在本书中学习了很多关于创建样式和样式表的方法。但是当你设计一个持久的网站时，可以合并其他几个步骤来帮助你在未来解决困难。这就是当你需要改变网站展现效果、找出一个特殊的样式或者把你的辛苦工作交给即将负责这项设计的其他人的时候。除了给你自己和其他人留下注释之外，如果你的CSS稍微有点规划和组织，也将使事情进展得更顺利些。

清楚地给样式命名

Name Styles Clearly

你已经学过了命名不同类型选择器的技术原则——类选择器以一个（英文中的句点）开头来识别样式为一个类，ID样式则以#符号开头。此外，给ID和类的命名

必须以字母开头，并且不能包含符号如&、*或者!。但是除了这些要求之外，遵循一些小规则也可以帮助你追踪样式并且更有效地工作：

根据用途而不是展现效果来命名样式。在创建一个样式来设置吸引眼球的、惹火的红色文本格式时，使用一个如.redhighlight的名字的确很吸引人。但是如果你（或者你的老板和客户）觉得那种橙色、蓝色或者黄绿色更好看时该怎么办？让我们来面对吧：一个命名为.redhighlight的样式实际上却是黄绿色会令人很困惑。最好使用一个说明该样式用途的名字。例如，如果那个“红色”高亮突显是用来显示访问者在填写表格时犯下的一个错误时，就命名为.error。当这个样式需要警告访问者一些重要的信息时，命名为.alert就可以了。改变颜色或改变样式的其他格式选项都不会导致混乱，因为这个样式仍然用来指出错误或者警告访问者——不管它的颜色如何。

不要根据位置命名。与避免根据展现效果命名的原因一样，你应该避免根据位置来给它们命名。有时候命名如#leftSidebar似乎像个很好的选择——“我要方框中的所有东西都放置在网页的左边！”但是可能你（或者其他人）将要把左边工具条移到右边、顶部甚至网页的底部。突然间，这个#leftSidebar的名字完全失去了意义。用一个更合乎于那个工具条用途的名字（比如#news、#events、#secondary- Content、#mainNav）来辨别工具条，无论它被移到哪里。目前为止，你已经在本书中见到的命名（比如#gallery、.figure、.banner、#wrapper等）都遵循这个惯例。

避免含义模糊的命名。例如.s、#s1和#s2可能给你节省了些键击次数，并使你的文件小了一点，但是在你需要更新网站时它们可能带来麻烦。你可能要绞尽脑汁，想知道所有那些奇怪的样式是做什么用的。命名一定要简洁而清楚：.sidebar、#copyright和#banner不要太多的键击，但是它们的用途显而易见。

使用多个类来节省时间

Use Multiple Classes to Save Time

网页中两个或者更多项目常常共用许多相似的格式化属性，你可能要用相同的border样式在网页上的很多图片周围创建框架。但是在那些项目之间可能也有一些格式上的区别。可能你想要某些图片浮动到左边，并且有一个右边距，而有些照片浮动到右边，并有一个左边距（见图14-2）。

最明显的解决办法是创建两个类样式，每一个都有相同的border属性，但是有着不同的float和margin属性。然后你应用一个类给应该浮动到左边的图片，应用

 

另一个类给应该浮动到右边的图片。但是当你需要给所有这些图片更新border样式时该怎么办？你将需要编辑两个样式，并且如果你忘记了其中一个，网页一侧的图片将全部弄错框架！

有一种在所有浏览器上都适用的技巧，并且令人惊奇的是，几乎没有设计师利用——把多个类应用到同一个标签上。这只是意味着当你给一个标签使用class属性时，添加两个（或者更多个）类名像这样：<div class="note alert">。在这个例子中，<div>标签从.note样式和.alert样式中都接收到了格式化指令。

假设你要给一组图片使用相同的border样式，但是有些图片你要浮动到左边而有些要浮动到右边。你得像这样处理这个问题：

1. 创建一个类样式，包括被所有图片共享的格式化属性。

这个样式可以被称作.imgborder，并且围绕所有四边都有一条2px粗的实心黑色边框。

2. 创建两个另外的类样式，一个给向左浮动的图片，另一个给向右浮动的图片。

例如，.floatLeft和.floatRight。一个样式将包括专门给一组图片的属性（带有一条小小右边距的左浮动），而另一个样式则包括专门给第二组图片的属性。

3. 把这两个类应用给每个标签，像这样：

<img src="photo1.jpg" width="100" height="100" class="imgborder floatLeft" />

或者

<img src="photo1.jpg" width="100" height="100" class="imgborder floatRight" />

此时，两个类应用给了每个标签，并且网页浏览器合并了每个类的样式信息来格式化那个标签。现在如果你要改变border样式，那么只要编辑一个样式——.imgborder——来更新左右浮动图片的边框。

当你只需要找出一个元素的几个属性而保留其他类似的格式化项目不变时，这种方法很有用。你可能要一个通用的工具条设计，把一个工具条浮动到右边，添加创造性的背景图片，并包括细心定义过样式的打印样式。你可以在网站上到处使用这种样式，但是工具条的宽度在几种情况下会有不同。可能在某些页面上是300px，而在其他页面上是200px。既然这样，创建带有基本工具条格式的单个类样式（比如.sidebar），并隔离只定义工具条宽度的类——例如.w300和.w200。然后应用两个类给每个工具条：<div class="sidebar w300">。

通过分组来组织样式

Organize Styles by Grouping

添加一个样式在另一个的后面是创建样式表的一种常用方法。但是不久，曾经是五个样式的组合已经膨胀成为一个庞大的150个样式的CSS文件。此时，快速找到你要改变的一个样式就像大海捞针一样。（当然，大海不会有个查找命令，但是你说对了。）如果你从一开始就组织好你的样式，长远来说就会轻松很多。对于如何把样式组合在一起，没有严格、快速的规则，但是有两种常用的方法：

把应用给网页相关部分的样式组合起来。把所有应用给网页文本、图片和横幅上的链接的规则组合放在一个地方，把给主要导航定义样式的规则放在另一个地方，给主内容的样式又放在一个地方。

把具有相关用途的样式组合起来。把所有用于布局的样式放在一个组，用于打印的样式放在一个组，用于链接的样式又放在另一个组，等等。

使用注释隔离样式组

无论你采用哪种方法，都要确保使用CSS注释（见第383页）来说明每个样式组。假设你组合了所有控制网页布局的样式并把它们放进样式表中的一个地方，用一个像这样的注释来说明这个组合：

/*   *** Layout *** */

或者

/* ---------------------------

             Layout

--------------------------- */

只要你以/*开头并以*/结束，就可以使用任何星号（*）、破折号（-）或者你喜欢的符号修饰组合来帮助使那些注释易于被认出。你会发现有多少网页设计师就有多少种变化组合。如果你在寻找灵感，那么看看这些网站是如何注释它们的样式表的：www.wired.com，www.mezzoblue.com和http://keikibulls.com。（使用在第391页方框中所述的Web Developer’s Toolbar，帮助你很快地看一眼其他设计师的样式表。）

使用多个样式表

Using Multiple Style Sheets

就如你在第13章中学过的，可以给不同的显示类型创建不同的样式表——可能一个是给屏幕，另一个是给打印机的。但是你也可能要有多个屏显样式表，仅仅出于组织的目的。这采用了前一节的基本观念——组合相关的样式——并前进了一步。当一个样式表变得这么大，以至于难于查找和编辑样式时，可能就要创建独立的样式表了，每一个样式表提供一种独立的功能。你可以把用来格式化表格的样式放在一个样式表中，用于布局的样式放在另一个表单中，决定东西颜色的样式放在第3个表单中，另一个样式表用来存放你的Internet Explorer修复，等等。要保持合理的独立文件数目，因为假设有30个外部CSS文件要处理的话，可能就根本节省不了时间了。

乍看之下，似乎最终在每张网页中会有更多的代码，因为你将有更多的外部样式表要链接或者导入——每个文件一行代码。啊哈，但是有一种更好的方法：用@import指令创建一个单一的外部样式表来包括多个样式表。图14-3图解说明了这种观念。

 

这是如何建立这类安排的步骤：

1. 创建外部样式表来格式化网站中不同类型的元素。

例如一个color.css文件带有控制网站颜色的样式，一个forms.css文件控制表格格式，一个layout.css文件用于布局控制，而一个main.css文件则涵盖了其他所有东西（见图14-3的右边）。

2. 创建一个外部样式表，并导入你在第1步中创建的每一个样式表。

你可以命名这个文件为base.css、global.css、site.css或者像这样比较通用的名字。这个CSS文件不包含任何规则，而是利用@import指令来附上其他的样式表，像这样：

@import url(main.css);

@import url(layout.css);

@import url(color.css);

@import url(forms.css);

这是这个文件里面需要的唯一代码，虽然你可能添加一些版本号、网站名称等注释来帮助辨别这个文件。

3. 最后，用<link>标签或者@import方法，把来自第2步的样式表添加到网站的HTML页面（更多有关使用这些方法的内容请见第33页）。例如：

<link rel="stylesheet" href="base.css" type="text/css" />

现在，当网页加载时，网页浏览器就会加载base.css，它会告诉浏览器依次加载4个其他的样式表。

这可能感觉就像有一整批的加载正在进行，但是一旦浏览器下载了那些文件，并把它们保存在它的调整缓存中，就不必再次从因特网上重新获取了。（见第35页的方框。）

使用单一外部样式表来加载几个其他样式表的另一个好处是：如果你稍后决定进一步把你的样式分成其他的样式表，那么你不一定要去弄乱网站的HTML。反之，只要再添加一个@import指令给那个门卫式的样式表（见第2步）。如果你决定把有关类型的所有样式从main.css文件中取出并把它们放在它们自己的type.css文件中，那么你不必碰网站的网页，只要打开它里面所有带@import指令的样式表，并再添加一个：@import url(type.css)。

这种安排也让你使暂时的设计变化在不同的样式表中交换，来从网站中获得一些乐趣。假设你决定改变网站的颜色一天、一个月或者一个季度。如果你已经把定义颜色的主要样式放进一个独立的color.css文件中，那么你可以用一个不同的颜色组创建另一个文件（比如summer_fun.css）。那么，在那个门卫式的文件中，改变color.css文件的@import指令，加载这个新的颜色样式文件（例如@import url(summer_fun.css)）。