CSS样式表文件的优化方法及技巧

时间：2022-05-29 15:30:02 | 来源：网络营销

时间：2022-05-29 15:30:02 来源：网络营销

今天，整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。

CSS代码优化的最大好处就是能够显着减少CSS文件的大小，其实还有很多其他益处，臃肿而杂乱的CSS样式表会使你遇到问题是难以调试，尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

不过没关系，看过本文之后，你一能能掌握CSS代码优化的技巧，今后让你的每一个CSS样式表都看起来整洁而简短吧。

一、使用CSS缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读（具体可查看亿企邦《CSS常用代码使用技巧大全》的相关介绍）。

CSS缩写的主要规则如下：

1、颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;

#336699可以缩写为#369;

2、盒尺寸

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

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:1em 0 2em 0.5em;

3、边框(border)

边框的属性如下：

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

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

语法是border:width style color;

4、背景(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%

5、字体(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两个值。

6、列表(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);

二、明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px；width:100em。

只有两个例外情况可以不定义单位：行高和0值。

除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三、区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的，为了避免这种错误，亿企邦建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的（具体可查看亿企邦《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍）。

四、取消class和id前的元素限定

当你写给一个元素定义CSS中class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用，你限定某个元素毫无意义。例如：

ExampleSourceCode
div#content{/*declarations*/}
fieldset.details{/*declarations*/}

可以写成：

ExampleSourceCode
#content{/*declarations*/}
.details{/*declarations*/}

这样可以节省一些字节。

五、默认值

CSS中通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在CSS样式表一开始就先定义所有元素的margin和padding值都为0，像以下这样：

ExampleSourceCode
*{
margin:0;
padding:0;
}

六、利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式，这样你可以很好的维护你的代码，并且还可以减少代码量。

那么，本来这样的代码：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

可以写成:

#container{font-family:Georgia,serif; }

七、使用多重选择器

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

八、使用外部样式表

这个原则始终是一个很好的设计实践，不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。

内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

九、提升CSS性能的规则

1、修复解析错误。

2、避免使用多类选择符。IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确。

3、移除空的css规则。这个规则不包含任何属性，类似：.foo { }空规则的产生原因一般来说是为了预留样式，去除这些空规则无疑能减少css文档体积（具体可查看亿企邦《网站CSS代码优化的7个原则》的相关介绍）。

4、正确使用display的属性。由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

CSS会检查一下几点：

display:inline后不应该再使用width、height、margin、padding以及float。

display:inline-block后不应该再使用float。

display:block后不应该再使用vertical-align。

display:table-*后不应该再使用margin或者float。

5、不滥用浮动。虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。CSS一旦检测出样式文件中有超过10次的浮动便会提示警告。

6、不滥用web字体。对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

7、不声明过多的font-size。这是设计层面的问题，设计精良的页面不会有过多的font-size声明。

8、不在选择符中使用ID标识符。主要考虑到样式重用性以及与页面的耦合性。

9、不给h1~h6元素定义过多的样式。全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。

10、不重复定义h1~h6元素。

11、值为0时不需要任何单位。

12、标准化各种浏览器前缀。通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：

.foo {-moz-border-radius: 5px;border-radius: 5px; }

13、使用CSS渐变等高级特性，需指定所有浏览器的前缀。

14、避免让选择符看起来像正则表达式。CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。

15、遵守盒模型规则。

亿企邦点评：

合理的CSS样式表不仅仅会节省后期的维护成本，也会对加载性能等方面产生影响。另外，你还要考虑对CSS进行压缩，除去注释和空格，以使得网页加载得更快。