课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 合肥Web前端培训:浅谈CSS代码重构的目的
  • 合肥Web前端培训:浅谈CSS代码重构的目的

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

  • 只有那写过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零基础周末班

WEB零基础周末班

开班日期:

WEB零基础全日制班

WEB零基础全日制班

开班日期:3-08

WEB前端业余班

WEB前端业余班

开班日期:3-08

WEB前端就业班

WEB前端就业班

开班日期:3-08

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56