使用CSS应该遵循的好经验和应该避免的坏习惯（一）
2014-03-26 15:47:59
从上到下对样式表的要素进行排版
对于初学者来说，他们放置样式表元素的顺序都是根据自己的喜好而定。但是对于CSS文件结构来说，这并不是一个好习惯，因为这可能是你在寻找CSS代码元素时花费大量的时间。将所包含的样式（例如body,H1,p,a等等诸如此类）按照从页顶到页脚的顺序排列，将会是一种好的选择。
下面是一个格式化代码结构的例子。
1 |
/****** General Styles *********/ |
2 |
3 |
body {...} |
4 |
h1, h2, h3 {..} |
5 |
p {...} |
6 |
a {...} |
7 |
8 |
/****** Header Style *********/ |
9 |
#header {...} |
10 |
11 |
/****** Navigation Style *********/ |
12 |
#nav {...} |
13 |
14 |
/****** Footer Style *********/ |
15 |
#footer {...} |
用CSS压缩器减小CSS的文件尺寸
压缩CSS文件的尺寸是一个很棒的想法，因为他可以去掉文件中的空格，空行以及冗余代码。这样，你就可以帮助浏览者提高CSS文件的加载速度。使用诸如CSS Compressor（CSS压缩器）这样的工具就可以做到这一点。
将相同元素下面的ID和Class进行分组
如果在相同的元素下存在不同的ID和Class，你应该将他们分组，让他们看起来更加美观和易于寻找，而且在查找错误时不用浪费时间。
作为一个例子，现在你有一个类容器，里面包含了一个DIV标记，下面有一个用于定义logo的ID，还有一个包含图标ID的DIV标记。
1 |
</pre> |
2 |
<div> |
3 |
<div id="logo"></div> |
4 |
<div id="tagline">< /div></div> |
你可以这样在CSS文件中对他们进行分组
1 |
. |
2 |
container {width: 960px; margin: 0; padding: 0;}. |
3 |
container #logo {font-family: Arial, sans-serif; font-size: 30px; color: red;}. |
4 |
container #tagline {font-family: Verdana; font-size: 10px;} |