加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_宿迁站长网 (https://www.0527zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

CSS代码重构与优化之路

发布时间:2016-01-14 21:42:36 所属栏目:优化 来源:伯乐在线
导读:写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多。CSS代码交错复杂,像一张庞大的

提高可维护性的方法

 

提高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代码变少,更易于重用和维护。例如下面的例子:

(编辑:云计算网_宿迁站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!