CSS架构：代码简洁原则_CSS架构教程

作者：大漠日期：2013-04-25 点击：1343

特别声明：此篇文章由Jekst根据Denise Jacobs的英文文章原名《CSS Architectures: Principles of Code Cleanup》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/以及作者相关信息

——作者：Denise Jacobs

——译者：Jekst

很多时候，大（还是小的）网站里的CSS是一个代码臃肿冗余的教材例子，多数代码夸张的使用了不必要的限定符元素，在不必要的长选择器中，过度的使用了特定的选择器，有更合适的选择器时却使用了具有依赖性的后代选择器，还有在不必要、不合适的地方使用了!important。我们可以学习一些基本的、可靠的CSS写法，实践来大大提高组织样式表的可维护性。我们最终的目标是给网站组织样式表，极大的提高其可扩展性。

因此，我们的方法包括两部分。首先，我们必须为编写整洁高效的CSS提供一些基本的实践。其次我们需要了解、学习日益流行的可扩展的CSS架构的主要方法，来使我们网站的样式表达到一个新的层次。

我探索的这些内容，将贯穿本文及接下来的文章，但是在开始编写可扩展的代码前，我们先做一些CSS的清理，就以我最喜欢一些技巧开始吧。

一些有用的技巧

从其他开发者那里学习工作技巧经常会受益匪浅。下面是我个人最喜欢的一些技巧。

定位样式

在页面上，使用一种方法定位元素的样式是个不错想法。如果你不使用IE开发者工具、火狐的Firebug或者谷歌的开发者工具等工具，你可以使用添加outline属性的旧式方法，添加outline属性能够帮你更快的看到你渴望看到那个元素的样式。

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
  outline: 1px solid red;/*用来定位的样式*/
}

使用outline属性的基本原理是：outline属性不会增加元素的尺寸大小，但是border会增加。使用红色（或者其他颜色名字）的outline是有意义的。在编写代码时，只使用十六进制数、rgb(a)、hsl(a)形式的代码，不使用颜色名字。所以当你看到一个颜色名字时你就知道这个属性是为了解决问题才加上的。注意outline属性在IE8以下不支持。

添加测试样式

在测试和解决问题过程中，另一个良好的做法就是缩进新添加的测试样式。

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
    margin: -2px 0 0 0;/*添加的测试样式*/
}

使用缩进，你就会确定这个样式是暂时的，以后也容易浏览查找。当你决定那个样式应该保留时，将这个样式的缩进量调整为其他确定样式的缩进量。

禁用样式

使用一个良好的方法添加一个新样式的同时，也需要有一个快速的方法禁用他们。通过把“x-”放在选择器或样式规则的前面就可快速排除这些样式。

.social a {
  -moz-transition: opacity 0.3s ease 0s;
  x-display: block;/*禁用样式*/
  height: 35px;
  opacity: 0.4;
}

这种方法比注释样式要快得多，如果以后你决定要保留这个样式，也比较容易浏览查找，把这个样式放在适当的位置。

CSS代码清理优化准则

既然我们已经学了那些不寻常的技巧，为了书写整洁，优化代码或者为了清理别人意大利面条式的CSS代码，我们来看一些经验法则。我们会从宏观层次到微观层次，首先要探索怎样提高HTML代码可读性和语义，然后转移到更好的组织文档、减少样式声明数量方法上。

宏观层次的优化

关注样式声明本身很容易，但是在建立选择器之前，你必须使HTML和样式表本身具有良好的可读性。

提供样式表信息和结构声明

在比较大的样式表文件里，我非常喜欢使用目录。对于开发者来说，拿到一个新的样式表，知道每个部分是做什么的、哪些名字可以直接跳到他们想要的那一组样式是非常有帮助的。

最基本的，我建议大家在样式文件上写上开发者的信息（名字等）、最后更新日期。使用这种做法，如果文件中有任何问题，当前的开发者知道找谁去问。

/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/

另外，我也建议大家在文件的开头写上目录，这样别的开发者看到这个目录后就会明白这个文件的结构、不同部分的作用。

/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(later in the document…)
/* =Layout */ (etc.)

注意在样式表文件的每个部分名字前加的等号（=）是特意这么做的——它可以作为一个标志，一种搜索文档更容易的方法。

注释和嵌套

注释和嵌套标记有助于你跟踪嵌套元素的开始和结束，使你更快的识别嵌套元素的代码块。

注释div或者其他主要的布局元素时，使用 或者 开始，使用或者标记结束。

嵌套可能看起来不是一个必要的步骤，但是在视觉角度上很有用，可以清楚的表明视觉层次，并且可以容易的发现问题，像行内元素包含了块级元素、不正确的关闭或重新写了元素标签等问题，这些问题可以引起布局上的大问题，但是校验通常不能帮助你发现那些简单的问题。

你可以看下面例子的不同：

之前的代码

<body>
<div id="pagewrap">
<div id="header">
<h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Title</h2>
<p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.</p>
</div>
<div id="secondarycontent">
<h3>Sidebar Title</h3>
<p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)</p>
</div>
<div id="footer">
<p>standard copyright and footer
information</p>
</div>
</body>

修改后的代码：

<body>
<div id="pagewrap">
  <div id="header">
    <h1>Website Title</h1>
    <ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  <div>
  <!-- end #header -->
  <div id="contentwrap">
    <div id="maincontent">
    <h2>Main Content Title</h2>
    <p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.</p>
    </div><!-- end #maincontent -->
 
    <div id="secondarycontent">
    <h3>Sidebar Title</h3>
    <p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)</p>
    </div><!-- end #secondarycontent -->
  </div><!-- end #contentwrap -->
  <div id="footer">
    <p>standard copyright and footer
information</p>
  </div><!-- end #footer -->
</div><!-- end #pagewrap -->
</body>

可以找到更多的信息和技巧来组织您的样式表——Creating Effective Semantic Markup

微观层次优化

微观优化是为了减小文件大小，提高页面加载速度，获取最佳体验。下面的这些方法可以在宏观层次上提高你的CSS。

按字母顺序书写样式规则

按字母顺序排列CSS规则是保持代码整洁、减少问题的一个重要途径。为什么呢？因为按字母顺序排列的样式很容易定位。

示例一：

.login {
  margin-top: 5px;
  line-height: 1.5em;
  padding-left: 5px;
  float: right;
  list-style-type: none;
  width: 80px;
  font-weight: bold;
  border-left: 1px solid #69824d;
}

示例二

.login {
  border-left: 1px solid #69824d;
  float: right;
  font-weight: bold;
  line-height: 1.5em;
  list-style-type: none;
  margin-top: 5px;
  padding-left: 5px;
  width: 80px;
}

为速度提高效率

长选择器迫使浏览器搜索页面DOM中不必要的元素进行匹配。排除元素限定符、避免使用后代选择器有利于更直接的匹配样式，提高速度。

优化前：

div#wrapper div#maincontent div#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

优化后：

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

更多关于此话题的内容可以看这篇文章《Optimizations for Improving Page Load Times》

保持代码简洁

当提到样式声明和选择器的时候，越少效率就越高。对于样式声明，可以采用下面的规则：

任何情况下，使用简写属性（当使用简写时，要记住：简写属性的语法，属性值的顺序、默认属性值和必须的属性值）
压缩值和单位
任何情况下都要避免写重复的属性

修改前的代码：

#sidebar {
  background-color: #fff;
  background-image: (bg.png);
  background-position: 0 0;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #ffff00;
  font-family: Georgia, serif;
  font-size: 1.33em;
  line-height: 1.33em;
  font-weight: normal;
  margin: 10px 20px 10px 20px;
  padding: .1em;
}

修改后代码

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

压缩代码

最后，删除多行和缩进也有助于提高你的网站效率和速度。在开发的时候推荐使用多行、嵌套和缩进，但是一旦网站要准备上线，减小CSS文件大小是最好的选择。一些压缩CSS较好的工具有CSS Compressor和 CSS Drive。

工具具有很大的作用

在编码的时候熟记这些规则能帮助你避免出错，这些错误可能在以后会花你大量的时间、令你失望。但是，不要以为你必须自己做这一切，一些不错的工具可以帮助你清理代码。我认为CleanCSS和Code Beautifier是不错的工具。在你学习集成我所描述的方法的同时，甚至可以进一步使用这些工具清理你的代码。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Jekst

常用昵称jekst，目前就职于北京一家信息技术公司，主要从事。net系列的开发，热爱前端，对css、jQuery有浓厚兴趣，喜欢参加技术交流活动。欢迎交流共勉：新浪微博。

如需转载烦请注明出处：

英文原文：http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2

中文译文：http://www.w3cplus.com/css/css-architectures-principles-of-code-cleanup.html

上一篇: Flexbox——快速布局神器 | 下一篇: 新手指南——优秀平面设计师是怎样炼成的

w3cplus

CSS架构：代码简洁原则

一些有用的技巧

定位样式

添加测试样式

禁用样式

CSS代码清理优化准则

宏观层次的优化

提供样式表信息和结构声明

注释和嵌套

之前的代码

修改后的代码：

微观层次优化

按字母顺序书写样式规则

示例一：

示例二

为速度提高效率

优化前：

优化后：

保持代码简洁

修改前的代码：

修改后代码

压缩代码

工具具有很大的作用

关于Jekst

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

CSS架构：代码简洁原则

一些有用的技巧

定位样式

添加测试样式

禁用样式

CSS代码清理优化准则

宏观层次的优化

提供样式表信息和结构声明

注释和嵌套

之前的代码

修改后的代码：

微观层次优化

按字母顺序书写样式规则

示例一：

示例二

为速度提高效率

优化前：

优化后：

保持代码简洁

修改前的代码：

修改后代码

压缩代码

工具具有很大的作用

关于Jekst

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品