关于CSS的规范

从四个方面来记录：

1. css命名规范
2. 书写规范
3. 注释规范
4. 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属性书写顺序提出的建议:

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裸奔的情况下页面也有较好的可读性。