CSS代码重构与优化之路【转载】
来源:互联网 发布:mac开机进度条卡住 编辑:程序博客网 时间:2024/05/17 18:26
写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多。CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞。
CSS代码重构的目的
我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护。我们对CSS代码重构主要有两个目的:
1、提高代码性能
2、提高代码的可维护性
提高代码性能
提高CSS代码性能主要有两个点:
1、提高页面的加载性能
提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存
2、提高CSS代码性能
不同的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、避免使用复杂的选择器,层级越少越好
4、精简页面的样式文件,去掉不用的样式
很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:
(1)样式文件偏大,影响加载速度
(2)浏览器会进行多余的样式匹配,影响渲染时间。
正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。
PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。
5、利用CSS继承减少代码量
我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。
常见的可以继承的属性比如:color,font-size,font-family等等
不可继承的比如:position,display,float等
提高可维护性的方法
提高CSS代码的可维护性,简单的说就是要让开发人员易于理解CSS代码,容易去修改它,不会破坏原有的功能。下面说说一些常用的手段。
1、命名与备注
命名是提高代码可读性的第一步,也是及其重要的一步。很多人都有这样的体会:命名是写代码中最让程序员头疼的事情之一,尤其是对母语非英语的开发人员来说,要找一个合适贴切的名字并不容易。提高自己命名的能力,可以多看看别人的代码。下面是CSS中的一些命名相关的建议:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
2、提取重复样式
简单说就是提取相同的样式成为一个单独的类再引用,这样不仅可以精简CSS文件大小,而且CSS代码变少,更易于重用和维护
3、书写顺序
这个书写顺序指的是各个样式的书写顺序,下面是推荐的CSS书写顺序
(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)
(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其他(animation, transition等)
书写顺序不一定非得按照上面的推荐来进行,而是根据你自己的习惯,但是最好能保证前后的习惯一致的,或者团队应该有一个共同的代码规范去遵守,这样后期维护起来也会方便许多。
1、写代码之前:从PSD文件出发
当我们拿到设计师给的PSD时,首先不要急于写CSS代码,首先对整个页面进行分析,主要关注点是下面几个:
(1)页面分成了几个模块,哪些模块是公用的,常见的比如头部和底部,还有一些菜单栏等等
(2)分析每一个模块都有什么样式,提取出公用的样式,注意公用样式是全局公用(整个页面公用)还是局部公用(模块内公用),公用样式包括公用的状态样式,比如公用的选中状态,禁用状态等等。
2、开始写代码
根据对PSD文件的分析,我们就可以开始着手写代码:
(1)第一步是搭好页面的骨架,也就是base样式,layout样式。
(2)第二步就是依次实现不同的模块,在这里我推荐BEM的命名思想,但是可以嵌套一到两层的选择器结构
3、优化代码
我相信当我们完成基本的页面效果后,还是会存在着一些重复的或者不够简洁的代码,这时候就是要去优化这些代码,主要是在提取重复代码,尽可能地精简代码。
CSS代码重构的目的
我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护。我们对CSS代码重构主要有两个目的:
1、提高代码性能
2、提高代码的可维护性
提高代码性能
提高CSS代码性能主要有两个点:
1、提高页面的加载性能
提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存
2、提高CSS代码性能
不同的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、避免使用复杂的选择器,层级越少越好
4、精简页面的样式文件,去掉不用的样式
很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:
(1)样式文件偏大,影响加载速度
(2)浏览器会进行多余的样式匹配,影响渲染时间。
正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。
PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。
5、利用CSS继承减少代码量
我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。
常见的可以继承的属性比如:color,font-size,font-family等等
不可继承的比如:position,display,float等
提高可维护性的方法
提高CSS代码的可维护性,简单的说就是要让开发人员易于理解CSS代码,容易去修改它,不会破坏原有的功能。下面说说一些常用的手段。
1、命名与备注
命名是提高代码可读性的第一步,也是及其重要的一步。很多人都有这样的体会:命名是写代码中最让程序员头疼的事情之一,尤其是对母语非英语的开发人员来说,要找一个合适贴切的名字并不容易。提高自己命名的能力,可以多看看别人的代码。下面是CSS中的一些命名相关的建议:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
2、提取重复样式
简单说就是提取相同的样式成为一个单独的类再引用,这样不仅可以精简CSS文件大小,而且CSS代码变少,更易于重用和维护
3、书写顺序
这个书写顺序指的是各个样式的书写顺序,下面是推荐的CSS书写顺序
(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)
(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其他(animation, transition等)
书写顺序不一定非得按照上面的推荐来进行,而是根据你自己的习惯,但是最好能保证前后的习惯一致的,或者团队应该有一个共同的代码规范去遵守,这样后期维护起来也会方便许多。
1、写代码之前:从PSD文件出发
当我们拿到设计师给的PSD时,首先不要急于写CSS代码,首先对整个页面进行分析,主要关注点是下面几个:
(1)页面分成了几个模块,哪些模块是公用的,常见的比如头部和底部,还有一些菜单栏等等
(2)分析每一个模块都有什么样式,提取出公用的样式,注意公用样式是全局公用(整个页面公用)还是局部公用(模块内公用),公用样式包括公用的状态样式,比如公用的选中状态,禁用状态等等。
2、开始写代码
根据对PSD文件的分析,我们就可以开始着手写代码:
(1)第一步是搭好页面的骨架,也就是base样式,layout样式。
(2)第二步就是依次实现不同的模块,在这里我推荐BEM的命名思想,但是可以嵌套一到两层的选择器结构
3、优化代码
我相信当我们完成基本的页面效果后,还是会存在着一些重复的或者不够简洁的代码,这时候就是要去优化这些代码,主要是在提取重复代码,尽可能地精简代码。
2 0
- CSS代码重构与优化之路【转载】
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- css代码重构与优化
- 代码重构与优化
- 代码优化与重构
- 代码重构与优化
- 【转载】代码重构与灵活交付
- 代码重构之路
- JS代码的简单重构与优化
- 重构优化代码结构
- vue-chat项目之重构与体验优化
- margin使用技巧与CSS代码优化
- java中类与类之间的关系
- 【软件开发】Visual Studio“15”预览版 5
- 均值,方差,协方差,协方差矩阵,特征值,特征向量
- Android 开源项目分类汇总
- Android逆向之旅—动态方式破解apk前奏篇(Eclipse动态调试smail源码)
- CSS代码重构与优化之路【转载】
- Swift 学习笔记 Core Data (一)
- MicroPython - 问题整理
- Registry key Error: Java version has value '1.8', but '1.7' is required
- Eclipse启动Tomcat时,45秒超时解决方式
- 实习工作日志
- iss 使用教程
- NOIP2007守望者的逃离
- EMS APK