编写简洁高效的CSS代码

整理自：前端观察网站

学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求，尤其对于大型网站来说，这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。

压缩还是不压缩

在我们讨论如何压缩CSS之前，需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲，而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师，你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站，可能就没有必要做额外的压缩。同样，如果你在编写需要和一个开放团队分享的代码，插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而，如果你在设计一个需要大量CSS的大型网站，你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间，但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时，很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式，丢掉它。不要借口稍后或许会用到，你也知道它们是杂乱的。除非你有一个合理的理由，否则不要添加它们。

常用css缩写语法总结（作者：阿捷 2005-4-8 15:28:00）

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：（这里只举margin的用法，padding用法一样）

margin:10px;      //上下左右

margin:20px 5px;         //上下  左右

margin:1em 0 2em 0.5em; //上左右下

margin:1em 0 2em 0.5em 1em; //上右下左

边框(border)

边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

字体(fonts)

字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

Outline

element {
  outline-width: number+unit;
  outline-style: (numerous);
  outline-color: color || #hex || (rgb / % || 0-255);
}

示例：
 element {
  outline:3px dotted gray;
}
 
 CSS Sprites
  CSS sprites背后的最初想法是减少HTTP请求的数量以加快页面的加载时间。Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中，通常是一个网格格式的图片。每个单独的图片通过切换大的sprite图片的background-position来显示。对于CSS代码来说，使用 sprite技术可以大大的提高代码的重用度和可维护性，这会明显的减少CSS的代码量。
 减少注释
  我喜欢在代码里面使用注释。我添加的注释越多，我就能在视觉上更快的定位到代码中的不同的部分。然而，如果你需要使用少的资源来高度优化的CSS，过度的注释就会吃掉宝贵的字节。所以，试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。
 合理的字体类型(font-Family)
  当文件大小成为一个大问题的时候，不要将替代字体包进你的font-famly中。去掉所有不必要的累赘，并将你的额外选项减少到一到两个。
 之前:
   
 
 之后:
   
 
  关于字体，强烈推荐阅读一下玉伯写的《三谈 Web 默认字体》，文中提到的几篇文章也都值得我们去阅读和思考。
 使用16进制色彩
  为了减少字节数，将所有RGB色值转换成他们对应的16进制值。这开起来可能没有太大的意义，但是任何字节都是值得的！
 之前:
   
 
 之后:
   
 
 去掉断行
  查看每一个样式属性，并将不需要的硬返回去掉。你也可以去掉最后一个分号。
 之前:
   #container{
    margin:5px;
    padding:5px 10px 30px 18px;
}
 
 
 之前: