css优化,提高性能的方法有哪些

html-css010

css优化,提高性能的方法有哪些,第1张

避免使用多类选择符(Don't use adjoining classes)

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确,参考IE6下的多类选择符一文。

移除空的css规则(Remove empty rules)

这个规则不包含任何属性,类似:.foo { }空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

正确使用display的属性(Use correct properties for a display)

由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:

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

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

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

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

不滥用浮动(Don't use too many floats)

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

不滥用web字体(Don't use too many web fonts)

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

不声明过多的font-size(Don't use too may font-size declarations)

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

不在选择符中使用ID标识符(Don't use IDs in selectors)

主要考虑到样式重用性以及与页面的耦合性。

不给h1~h6元素定义过多的样式(Don't qualify headings)

全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

不重复定义h1~h6元素(Heading styles should only be defined once)

值为0时不需要任何单位(Zero values don't need units)

标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)

通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:

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

使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)

避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)

CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。

CSS优化包括很多方面,写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的。随便讲一下,不对的地方多多指正:

1、避免过度约束

// 糟糕

ul#nav{..}

// 好的

#nav{..}

2、后代选择符最烂

// 烂透了

html div tr td {..}

3、避免链式(交集)选择符

// 糟糕

.menu.left.icon {..}

// 好的

.menu-left-icon {..}

4、使用复合(紧凑)语法

// 糟糕

.someclass {

 padding-top: 20px

 padding-bottom: 20px

 padding-left: 10px

 padding-right: 10px

 background: #000

 background-image: url(../imgs/carrot.png)

 background-position: bottom

 background-repeat: repeat-x

}

// 好的

.someclass {

 padding: 20px 10px 20px 10px

 background: #000 url(../imgs/carrot.png) repeat-x bottom

}

5、避免不必要的命名空间

// 糟糕

.someclass table tr.otherclass td.somerule {..}

//好的

.someclass .otherclass td.somerule {..}

6、避免不必要的重复

.someclass {

 color: red

 background: blue

 font-size: 15px

}

.otherclass {

 color: red

 background: blue

 font-size: 15px

}

// 好的

.someclass, .otherclass {

 color: red

 background: blue

 font-size: 15px

}

7、最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。

8、避免 !importants,其实你应该也可以使用其他优质的选择器。

9、尽可能精简规则,你可以进一步合并不同类里的重复的规则。

好吧,我就总结这9点吧,如果还有好的规则,请贴上来~~~

CSS是页面效果呈现中非常重要的组成部分,它包括颜色、大小尺寸、背景和字体等。写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的。

下面就是技巧7则:

1. 合并多个相同属性;

比如很多人写margin会这样写

margin-top: 8px

margin-right: 4px

margin-bottom: 8px

margin-left: 4px

但是这样写更高效

margin: 8px 4px 8px 4px

对于font属性来说,也一样,

常规写法

font-family: Tahoma

font-weight: bold

font-style: italic

font-size: 12px

推荐写法

font: italic bold 12px Tahoma

常规写法

background-image: url(bk_main.jpg)

background-repeat: repeat-x

background-color: #ccccff

推荐写法

background: #ccccff url(bk_main.jpg) repeat-x

2. 把具有相同属性的标签写在一块;

比如

H2

{

font-size: 16pt

color: #4169e1

font-family: 'Trebuchet MS' , Arial

margin: 4px 0px 2px

padding-left: 10px

text-decoration: underline

}

H3

{

font-size: 14pt

color: #4169e1

font-family: 'Trebuchet MS' , Arial

margin: 4px 0px 2px

padding-left: 10px

text-decoration: underline

}

更好的写法是这样

H2, H3

{

color: #4169e1

font-family: ‘Trebuchet MS’ , Arial

margin: 4px 0px 2px

padding-left: 10px

text-decoration: underline

}

H2

{

font-size: 16pt

}

H3

{

font-size: 14pt

}

3. 简化颜色;

比如 #99ff33 可以写成 #9f3

比如 #ff0000 可以写成 with #f00

比如 #000000 可以写成 #000

4. 在父级元素中用Class;

比如有这样一段代码

<p>Home</p>

<p>About</p>

<p>Contact</p>

<p>Sitemap</p>

其实上面的可以这样写

<div>

<p>Home</p>

<p>About</p>

<p>Contact</p>

<p>Sitemap</p>

<div>

5. 不要使用令人眼花缭乱的注释;

比如下面这样的

/*****************************/

/**********Header CSS*********/

/*****************************/

你可以把它写成这样

/*Header CSS*/

6. 永远不要在行内元素中加入CSS;

<p style="font-size: 14pt font-family: Arialtext-decoration: underline">Home</p>

<p style="font-size: 14pt font-family: Arialtext-decoration: underline">About</p>

<p style="font-size: 14pt font-family: Arialtext-decoration: underline">Contact</p>

<p style="font-size: 14pt font-family: Arialtext-decoration: underline">Sitemap</p>

请把它们写成这样

<p>Home</p>

<p>About</p>

<p>Contact</p>

<p>Sitemap</p>

7. 移除多余的空格和空行。

移除多余的空格和空行能够减小style文件大小.