合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

合肥Web前端培训:浅谈CSS代码重构的目的

  • 时间:2016-12-23
  • 发布:合肥Web前端培训
  • 来源:达内新闻

只有那写过CSS代码的孩纸们才能够体会到,伴随项目的不段延伸,项目中的CSS代码也会越来越多,如果我们没能及时对CSS代码进行整理维护,这些代码会变得越来越多,我们查看起来也就越来越杂乱,如果一旦发生错误的话,我们将无从查起。合肥达内web前端培训讲师为大家总结下CSS代码重构的目的。

CSS代码重构的目的

我们写CSS代码时,不仅是完成页面设计效果,还应该让CSS代码易于管理,维护。我们对CSS代码重构主要有两个目的:

1、提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存

2、不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的

提高CSS代码的可维护性主要是体现在下面几点:

1、可重用

一般来说,一个项目的整体设计风格是一致的,页面中肯定有几个风格一致但有些许不同的模块,如何在尽可能多地重用CSS代码,尽可能少地增加新代码,这是CSS代码中非常重要的一点。如果CSS代码的重用性高,我们可能只需要写一些不一样的地方,对页面性能和可维护性、提高开发效率都有很大的帮助。

2、可扩展

如果产品增加了某个功能,我们应该保证新增加的CSS代码不会影响到旧的CSS代码和页面,并且尽可能少地增加新代码而重用旧代码。

3、可修改

如果某个模块产品经理觉得要修改样式,或者要删掉它,如果没有规划好相应的CSS代码,过了一段时间之后,开发人员可能已经不记得这段代码作用了几个地方,不敢修改或删除它,这样下去CSS代码也就越来越多,影响了页面的性能,还造成了代码的复杂度。

CSS代码重构的基本方法

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

提高CSS性能的手段

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

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

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

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

(2)减少页面体积

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

2、不使用@import

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

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

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

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择合肥达内web前端培训,不再孤军奋战,轻轻松松做IT高薪白领。合肥达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ:381809357(合肥达内就业服务部)咨询了解。

上一篇:合肥Web前端培训:学好前端的应该具备的一些心态
下一篇:合肥Web前端培训:CSS代码编写的重点

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省