养成良好的CSS样式书写习惯

【 tulaoshi.com - Web开发 】

    之所以在讲述一切技术技巧之前先谈论CSS书写习惯，是因为我觉得技术技巧是可以很快学到的，但是书写习惯是慢慢形成的，无论是书写的条理性，命名的规范性，注释的易读性还是代码的简化性都不是一朝一夕能够形成的。所以希望学习CSS的朋友们从一开始就要养成良好的书写习惯，这对将来自己查改样式或者交由他人修改的可读性都有相当重要的意义。

    首先，选择符命名规范化。一般来说，选择符的名称至少要包含需要被样式化的元素的意义。比如说，定义框架的话，一般用“frame”，定义文章内容时用“contents”，标题的话可以用“title”等等，当然，如果需要更加具体的话，可以采用追加下滑线的方法，比如说左边的框架可以用“left_frame”，最新的内容可以用“latest_conents”等等。命名尽量不要用拼音，更不要用拼音的首字母，比如：kuangjia（框架）或者kj（框架），这样一来易读性会大打折扣，如果碰到老外阅读的话就会更加莫名。避免使用一些只有自己才能理解的词汇，而多采用通用的名称，比如textbox，menu，navi等等。

    其次，为CSS内容划分区域。意思就是按照网页中需要被样式化的元素进行分组来实现对CSS内容的管理。打个比方，我们可以将一个CSS样式表按照如下组别划分：

/*----------------页面结构----------------*/
[CSS代码]
/*----------------头部----------------*/
[CSS代码]
/*----------------表单元素----------------*/
[CSS代码]
/*----------------数据列表----------------*/
[CSS代码]
/*----------------文字内容----------------*/
[CSS代码]
/*----------------图片----------------*/
[CSS代码]
/*----------------其它元素----------------*/
[CSS代码]

    这样一来，我们可以将所有CSS样式分门别类地放入不同部分，既方便自己查询修改，也为他人的查阅带去方便。

    最后，及时准确地添加注释。注释的书写也是一门学问。有时会发现这样的问题，自己写的注释，但过了一段时间后，发现连自己都忘了这注释到底是什么意思，指的是什么东西。这就是因为注释书写的不够准确清晰。注释一定要描述出对象的作用，而不是描述对象的特点外观，因为作用不容易改变而特点外观是会发生变化的。比如，避免用“红色的标题”作为注释，如果将来把标题颜色改成了蓝色，那这一注释就失去了意义，你可以用“正文标题”或者诸如此类的表示其功能的词汇来注释说明会显得有意义的多。还有一点就是，注释标注要及时，最好是写一段标一段，以免一段时间后产生遗忘。

    讲到这里，最基本的一些习惯都已提到，当然，有一些方法根据自己的情况可以进行改进。总结来讲，良好的CSS样式书写习惯是为了提高对CSS样式表管理维护的效率，这不仅是对书写者本身来说，更是为其他阅读者带去方便。

PS补充：

CSS样式命名规则(仅供参考)
1.样式命名

头：header
尾/页　脚：footer
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　Logo
标　语/广告条：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
-- Footer --
内容区
-- End Footer --

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css