如何提高CSS的可维护性
为了排版的正确,请查看我的原文:如何提高CSS的可维护性
为CSS正确的命名可以提高代码的可读性,便于后期查找修改。
下面记录一些常用的手段:
命名与备注
命名是提高代码可读性的第一步,也是最重要的一步。我接触css的时候命名的问题困扰了我很久,尤其是我这种对英语一窍不通的人来说,当时我就是胡乱命名的,后来看多了别人的代码,才知道这东西是可以统一化的。
下面是一些常规的命名(来自别人的blog,摘抄下来方便平时多看看):
头: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
良好的备注也是同样重要,比如可以在不同的功能区之间加入注释,或者是在CSS开头加入注释导航等。这个方法我是在看国外一个WordPress模板的css的时候看到的,我就在某个项目中使用了一次,效果还是不错的。
/**
* Table of Contents:
* A 首页
* 1.0 - Body
* 2.0 - 头部
* 3.0 - 导航区
* 4.0 - 品牌区
* 5.0 - 最新评论区
* 6.0 - 右侧搜索区
* 7.0 - 右侧热门商店
* 8.0 - 热门折扣卷
* 9.0 - Media Queries
* 10.0- Footer
* 11.0- Comments
* 12.0- Coupon-info列表页面
* 13.0- Coupon-info内容页面
*/
/* A 首页 */
/* 1.0 Body */
body {
background: #f3f3f3;
}
ul,li {
margin: 0;
padding: 0;
list-style-type: none;
}
.boder {
margin-top: 15px;
border: 1px solid #E2E2E2;
background: white;
margin-bottom: 15px;
}
.max-clear {
clear: both;
}
/* 2.0 头部区开始*/
.logo {
float: left;
}
.banner {
margin-top: 5px;
float: right;
}
#main {
clear: both;
}
/* 头部区结束*/
提取重复样式
这个方法我也经常见过,但每次真正做东西的时候,就忘记了这茬。经常见到的是在一个div里有多个类,如:
<div class="title black-border bold">Ruofei Blog</div>
<style type="text/css">
.title{padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 1px #000 solid;}
.bold{font-weight: bold;}
</style>
效果如图:
其中title类是主要定义这个div的边距位置宽度,black-border类是专门定义一个黑色的像素的实线边框,bold类是加粗。将这三个类分离开后,以后需要用到加粗的熟悉时,直接在div中加上bold类,需要加黑色实线边框的时候直接加上black-border类即可,不需要再css样式中重复写这些属性,大大的减少了css的代码量。例如:
<div class="title black-border bold">Ruofei Blog</div>
<br/>
[站外图片上传中……(3)]
<style type="text/css">
.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 1px #000 solid;}
.bold{font-weight: bold;}
</style>
效果如下:
直接给img标签加了一个black-border类,就得到了一个和上面div一样的边框效果,而我并没有在css中单独为这个img标签定义边框属性。
我知道这个对大家来说是很正常的事情,但对我这种刚接触前端的小白来说,真心很神奇!
书写顺序
参考的文章中提到了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等)
自己的一点小感悟
当我看到这里的时候,我突然觉得,上一点提取重复样式完全可以按照这种分类去归类,相同类型的css分离成一个类,后面即可重复调用,。
<div class="title black-border font-bold">Ruofei Blog</div>
<br/>
[站外图片上传中……(4)]
<style type="text/css">
.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 2px #000 solid;}
.font-bold{font-family: "PT Mono", Consolas, Monaco, Menlo, monospace;font-weight: bold;}
</style>
我对上面的那段代码修改了下,title类专门控制位置信息,black-border类控制边框样式,font-bold类控制字体信息。
但我写完后发现,按照这种方法分类确实可以,但还是得考虑css重复性的问题,比如我一个地方的文字需要加粗,但不需要这个字体,所以就不能使用font-bold类。
总结,还是得在动手前想清楚页面中,重复的内容是哪些,将重复的部分提取出来,单独写成一个类,尽管这个类可能只是控制一个文字的字体大小。
参考文章总结的方法
1、写代码之前:从PSD文件出发
当我们拿到设计师给的PSD时,首先不要急于写CSS代码,首先对整个页面进行分析,主要关注点是下面几个:
(1)页面分成了几个模块,哪些模块是公用的,常见的比如头部和底部,还有一些菜单栏等等
(2)分析每一个模块都有什么样式,提取出公用的样式,注意公用样式是全局公用(整个页面公用)还是局部公用(模块内公用),公用样式包括公用的状态样式,比如公用的选中状态,禁用状态等等。
2、开始写代码
根据对PSD文件的分析,我们就可以开始着手写代码,我比较推荐SMACSS将样式分成不同类型的做法:
(1)第一步是搭好页面的骨架,也就是base样式,layout样式。
(2)第二步就是依次实现不同的模块,在这里我推荐BEM的命名思想,但是可以嵌套一到两层的选择器结构
3、优化代码
我相信当我们完成基本的页面效果后,还是会存在着一些重复的或者不够简洁的代码,这时候就是要去优化这些代码,主要是在提取重复代码,尽可能地精简代码。
部分内容参考:CSS代码重构与优化之路