本文介绍了CSS命名、书写、注释规范及CSS Reset的重要性。详细讲述了文件命名规则、id和class命名建议、属性书写顺序、注释规范以及CSS Reset的应用场景。
从四个方面来记录：
- css命名规范
- 书写规范
- 注释规范
- css reset
1.命名的规范
命名是个老大难的问题，即使对于那些使用了很长时间CSS的开发人员来说，面对CSS文件的命名也会犯难或者随意对待，其实，一个良好的命名范，不仅可以提高代码的阅读体验，而且对搜索引擎优化也是很有帮助的。
(1)CSS文件的命名：
| 文件名 | 说明 |
| reset.css | 重置样式，重置元素默认样式 |
| global.css | 全局样式，全站公用，定义页面基础样式 |
| themes.css | 主题样式，用于实现换肤功能 |
| module.css | 模块样式 |
| master.css | 母版样式 |
| columns.css | 专栏样式 |
| forms.css | 表单样式 |
| mend.css | 补丁样式 |
| print.css | 打印样式 |
reset.css是用于除去元素的默认样式，这个在第四点里会讲到，
global.css用于定义公共模块样式以及基础样式，常见的公共模块样式包括导航，底部信息栏等，基础样式包括全局字体，文字颜色等。
那么问题来了，搞那么多个css文件，会引发多次HTTP请求，页面加载速度岂不是非常慢？对于这个问题，事实上把样式文件划分为多个文件，这是开发阶段的做法，按照功能模块划分css文件，那是为了方便在开发阶段进行开发和修改，在发布的时候，还是要用工具将多个CSS文件压缩合并成一个文件，开发阶段和发布阶段是有区别的。
(2)id和class命名
大家一定对id和class的命名感到头痛，既不想随随便便取个名字，但是有时候也想不出一个好的名字，一个好的命名是非常有利于搜索引擎优化的，其实搜索引擎识别一个页面，很大一部分是根据元素的id和class命名来判断，假如一个页面的元素命名很随意的话，搜索引擎的爬虫很容易迷路，最后导致它以后很少来光顾你的网站。
| 最外层 | wrapper(用于包裹整个页面) |
| 头部 | header |
| 内容 | content |
| 侧栏 | sidebar |
| 栏目 | column |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 标志 | logo |
| 导航条 | nav |
| 主题 | main |
| 左侧 | main-left |
| 右侧 | main-right |
| 底部 | footer |
| 友情链接 | friendlink |
| 加入我们 | join-us |
| 版权 | copyright |
| 服务 | service |
| 登陆 | login |
| 注册 | register |
| 主导航 | main-nav |
| 子导航 | sub-nav |
| 边导航 | side-nav |
| 左导航 | leftside-nav |
| 右导航 | rightside-nav |
| 顶导航 | top-nav |
| 菜单 | menu |
| 子菜单 | submenu |
| 标题 | title |
| 摘要 | summary |
| 登陆条 | loginbar |
| 搜索 | search |
| 标签页 | tab |
| 广告 | banner |
| 小技巧 | tips |
| 图标 | icon |
| 法律声明 | siteinfolegal |
| 网站地图 | sitemap |
| 工具条 | tool,toolbar |
| 首页 | homepage |
| 子页 | subpage |
| 合作伙伴 | partner |
| 帮助 | help |
| 指南 | guide |
| 滚动 | scroll |
| 提示信息 | msg |
| 投票 | vote |
| 相关文章 | related |
| 文章列表 | list |
2.书写的规范
在CSS中,属性的书写顺序也是有讲究的,良好的书写习惯,既方便阅读,也方便后期维护.以下是两位CSS专家对CSS属性书写顺序提出的建议:
|
属性类别
|
举例
|
| 影响文档流的属性(布局属性) | display，position，float，clear等 |
| 自身盒子模型属性 | width，height，padding，margin，border，overflow等 |
| 文本性属性 | font，line-height，text-align，text-indent，vertical-align等 |
| 装饰性属性 | color，background-color，opacity，cursor等 |
| 其他属性 | content，list-style，quotes等 |
举例：
#main{
/*影响文档流的属性*/
display:inline-block;
position:absolute;
top:0;
left:0;
/*盒子模型属性*/
width:100px;
height:100px;
border:1px solid red;
/*文本性属性*/
font-size:15px;
font-weight:bold;
text-indent:2em;
/*装饰性属性*/
color:white;
background-color:red;
/*其他属性*/
cursor:pointer;
}
但是对于一些特殊的功能代码，
3.注释规范
（1）顶部注释
顶部注释是文件的基本信息，一般包括文件说明，文件版本（更新），作者以及版权声明等。
举例：
/*
*@description:说明
*@author:作者
*@update:更新时间
*/(2)模块注释
模块注释是各个模块（如导航，底部信息栏等）的注释说明，模块注释建议要说明“开始”和“结束”，以便一目了然。
比如：/*nav start*/
/*nav end*/
（3）简单注释
就是简单的单行注释（/**/），注意，不要使用两个斜杠//，在ie中会出现问题。
多行注释如顶部注释例子所示。
注释是给人看的，在网站发布时我们会用压缩工具对css文件进行压缩，，压缩之后注释就会被去掉，如果我们任然想要保留某些注释，只要用以下方式：/*!注释内容*/，也就是说在注释内容前面再加上一个“！”。
4.css reset
我们都知道，在html中很多元素都有默认样式，比如p元素有上下边距，strong元素有字体加粗样式，ul有缩进样式，css reset就是除去元素在浏览器中的默认样式。说起去除浏览器的默认样式，有些小伙伴可能会想到用通配符：*{padding：0；margin：0}，在实际开发中，并不建议这么用，因为这个方法性能低下，它去除了所有元素的padding和margin，然而像表格元素（或者input元素）的margin和padding我们是不希望去掉的，当我们想要时又得重新写回来，所以不建议采用这种方法。不过，在测试中，我们可以使用这种方法。
另外一种方法是使用重置样式表点击打开链接，这是css专家Eric Meyer在2011年1月26日发布的，如果你要使用这张重置样式表，必须注意一下这几点：
（1）css reset 代码必须放在其他css之前引入，因为浏览器对css代码是从上到下来解析的，只有把CSS reset放在前面，才有意义。
（2）Eric Meyer建议应该根据需求来修改这张样式表，正所谓滥用不如不用，千万不要原封不动的复制进去。
（3）这张样式表也有许多不足的地方，比如div，li，code根本没有默认padding和margin，因此，我们在用的时候应该重新修改一下。
（4）现在国内外大多数优秀的互联网企业都在舍弃css reset，对于真正的开发实战来说，css reset也是可有可无的。因此，是否使用css reset也应该根据实际情况而定。
说到这里，肯定有很多朋友想问为什么浏览器要有默认样式呢，如果没有默认样式岂不是更好？
其实，默认样式的存在就是为了保证在没有样式表的情况下页面也能勉强的显示，也就是保证在css裸奔的情况下页面也有较好的可读性。
扫一扫
5111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
