CSS代码重构与优化

作者:日期:2016-11-15 13:22:58 点击:316

在平时项目中,大家可能有这样的体会,项目规模越大,css代码就会越多,css代码如果没有进行优化和维护,就会复杂加错,向一个乱了的毛线团,找不到开始的位置,这对于以后的维护工作来说,是不利的,你不晓得修改了这行代码,会不会对哪一行产生影响。

CSS代码为什么要重构呢?

它主要是有两个目的:
1、提高代码性能
a、提高页面加载速度,也就是说减小css文件的大小,提高页面加载速度,尽可能的利用http缓存;
b、提高css代码性能,不同的css代码,浏览器对其解析的速度不同,如何提高浏览器解析css戴拿的速度也是我能要考虑的,例如css选择器是从右侧开始查找。

2、提高代码可维护性
a、可重用
一个网站风格基本保持一致,首页上可能有很多模块样式相同,内容不同,内容从后台调取,那么css样式和html结构就可以重复使用,那么html通过负值即可,css代码就可以很多html模块使用同一部分的css样式;
b、可拓展
如果有新的需求增加模块,我们应该保证新增代码不会影响旧的代码和页面,并尽量减少新增,能重用尽量重用;
c、可修改
如果“万恶”的产品要求修改样式或者删除,如果当初没有进行很好的规划,那么你肯能就不会在原来的基础上“动刀”,因为你怕会影响其他,那有些无用的代码就会一直存在,影响性能。

那么css代码如何重构呢?
这些方式肯能是你平时工作中就不自觉这样做的方法,也有一些你不注意的地方,那么我们就一起总结一下吧!

1、将CSS样式单独写在单独的CSS文件中,在head标签中进行调用
a、内容样式分离,利于维护
b、减少html页面体积,加快加载速度
c、css文件可以被缓存、重用,维护成本降低

2、不使用@import,这种形式会影响css文件的加载速度

3、避免使用复杂的选择器,层级越少越好
选择器最好不要嵌套三层以上,尽量不用标签选择器在最末尾

<style>
div h1 a{}/*no*/
.header .logo .link{}/*yes*/
</style>
<div class="header">
<h1 class="logo">
<a href="url" class="link">珠峰培训</a>
</h1>
</div>

4、精简页面样式文件,去掉无用样式
很多页面的样式融合到一起,这样一个页面引用了很多无用样式,导致文件过大,加载速度慢,浏览器也会进行很多的匹配,影响渲染时间,我们应该合理的合并当前页面样式,而不是多有的css文件放到一起,在这里也不是绝对的,如果是小型项目,利用缓存我们可以将文件合并在一起,如果是未知的大项目,我们就要一一的分割;

5、利用css的继承性
例如文字有关的css属性都是可继承的属性,字体的大小、样式等。

提高代码的可维护性

什么意思呢,比如说一个项目非常庞大,那么就需要很多前端人员来共同运行,如果代码的维护性高,修改起来也相对容易,并且不会破坏其他样式。

1、命名
命名是css选择器的第一步,整个团队的命名风格一致,这样其他人接收的时候才会更加的高效,这里给大家一些参考:

1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
四、注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写,除非一看就明白的单词。

2、备注
备注得当,每一个模块的意义别人一读就明了;

3、重复样式封装,一次定义多次调用
将相同的样式形成单独的类再进行引用,更加利于维护

<style>
.clear:after{
display:block;
content:"";
clear:both;
}

</style>

4、书写的顺序(是指演示的书写顺序)

<style>
.header{
位置属性{position top z-index display float}

盒子模型{width height padding margin}
文字{font line-height}
背景{background border}
其他{animation transition}
</style>

总结自己的习惯,尽量成系统的去解析页面,从psd开始就有一个基本思想,不要随心的去理解效果图,命名的时候要注意,选择器的长度也不要太长哦,能重复使用的代码尽量封装到一个类中,可以多次调用。

上一篇: css布局之BFC模式(block formatting context)

下一篇: CSS中单行文本溢出显示省略号的方法