ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

CSS代码重构与优化(1/6)

来源:网络整理     时间:2016-01-18     关键词:

本篇文章主要介绍了"CSS代码重构与优化",主要涉及到方面的内容,对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下: 原文http://www.cnblogs.com/answercard/p/5104288.html原始文章:http://luopq.com/2016/01/...

原文http://www.cnblogs.com/answercard/p/5104288.html

原始文章:http://luopq.com/2016/01/05/css-optimize/

CSS代码重构的基本方法

前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它。

提高CSS性能的手段

首先说说如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点:

1、尽量将样式写在单独的css文件里面,在head元素中引用

有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:

(1)内容和样式分离,易于管理和维护

(2)减少页面体积

(3)css文件可以被缓存、重用,维护成本降低

2、不使用@import这条手段已经是众所周知,这里简单提一下,@import影响css文件的加载速度

3、避免使用复杂的选择器,层级越少越好

有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

建议选择器的嵌套最好不要超过三层,比如:

.header .logo .text{}

可以优化成

.haeder .logo-text{}

简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

4、精简页面的样式文件,去掉不用的样式

很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:

(1)样式文件偏大,影响加载速度

(2)浏览器会进行多余的样式匹配,影响渲染时间。

正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。

PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应 该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。

5、利用CSS继承减少代码量

我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

常见的可以继承的属性比如:

color,font-size,font-family等等

不可继承的比如:

position,display,float等

大家可以查看 CSS参考手册

提高可维护性的方法

提高CSS代码的可维护性,简单的说就是要让开发人员易于理解CSS代码,容易去修改它,不会破坏原有的功能。下面说说一些常用的手段。

1、命名与备注

命名是提高代码可读性的第一步,也是及其重要的一步。很多人都有这样的体会:命名是写代码中最让程序员头疼的事情之一,尤其是对母语非英语的开发人员来说,要找一个合适贴切的名字并不容易。提高自己命名的能力,可以多看看别人的代码。下面是CSS中的一些命名相关的建议:

相关图片

相关文章