css 下划线_CSS规范

    规范化的CSS不仅利于团队合作，而且对后期的维护以及代码的重用，都非常重要。

    我们从以下四个方面来介绍一下关于CSS规范的内容。

(1)命名规范

(2)书写规范

(3)注释规范

(4)CSS reset

命名规范

    命名规范，主要有四个方面：CSS文件命名、id和class命名 、网页主体命名、网页细节命名。 

CSS文件命名

    不同样式和内容的文件要用不同的名字来区分，方便后期查看。

文件名	说明
reset.css	重置样式
global.css	全局样式，定义页面基础样式
themes.css	主题样式
module.css	模板样式
master.css	母版样式
columns.css	专栏样式
form.css	表单样式
mend.css	补丁样式
print.css	打印样式

文件命名方式很多，不用刻意去记，需要的时候直接查看就行。 

 id和class命名

    id和class命名，比较常见的有三种方法。

(1)骆驼峰命名法

(2)中划线命名法

(3)下划线命名法

    命名统一规范，尽量不要出现一个用中划线命名，而另外一个用下划线命名的情况。

网页主体命名

    主体部分命名可以参考下表

主体部分	命名
最外层	wrapper
头部	header
内容	content
侧栏	sidebar
栏目	column
导航条	nav
标志	logo
主体	main
左侧	main-left

网页细节命名

    细节部分可以分为导航、菜单、其它三部分。

(1)导航命名

导航部分	命名
主导航	main-nav
子导航	sub-nav
边导航	side-nav
左导航	leftside-nav
右导航	rightside-nav
顶导航	top-nav

(2)菜单命名

菜单部分	命名
菜单	menu
子菜单	submenu

(3)其它命名

其它部分	命名
标题	title
摘要	summary
登录条	loginbar
搜索	search
标签页	tab
图标	icon
工具条	toolbar
帮助	help
指南	guide

    对于上面的命名规范，不用刻意去记，在需要的时候查看就行了，主要要了解这种思想，为以后的开发节约成本。   

书写规范

    CSS中，属性的书写顺序也是很有讲究的。良好的书写顺序习惯，既方便阅读，同时也方便后期维护。

    推荐的CSS属性书写顺序如下表

属性类别	举例
影响文档流属性	display、position、float等
自身盒模型属性	width、height、padding等
文本性属性	font、line-height等
装饰性属性	color、background-color等
其它属性	content、list-style等

注释规范

    CSS中，为一些关键代码做一下注释是非常必要的。可以带来许多方便，如：方便理解、方便查找、方便项目组里的其他开发人员了解你的代码、方便以后对自己的代码进行修改。

顶部注释

    顶部注释是文件的基本信息，一般包括文件说明、文件版本(更新)、作者以及版权声明等。 

/*

    文件基本信息

    */

模块注释

    模块注释是各个模块(如导航、底部信息栏等)的注释说明，模块注释建议要说明“开始”和“结束” 

/*导航部分开始*/

/*导航部分结束*/

简单注释

    简单注释一般用于注释某些关键代码，如功能代码。简单注释分为单行注释和多行注释这两种。 

单行注释

/*    */

多行注释

/*

*/

    以上注释都是在开发阶段，但是当网站发布时候，会使用工具进行压缩才发布出去。压缩工具会删除所有注释，有些时候为了保留一些版权声明的注释说明，需要使用下面方式 。 

/*!    注释内容    */

在注释内容最前面加上一个“！”，这样压缩工具就不会删除这条注释信息了。 

CSS reset

    在HTML中很多元素都有一定的默认样式。如下表

元素	默认样式
p	有上下边框
strong	有字体加粗样式
em	有字体倾斜样式
ul	有缩进样式

    reset就是“重置”的意思，CSS reset指的就是重置样式。简单的说法就是：去除元素在浏览器的默认样式。

    现在浏览器有很多，不同的浏览器，元素默认样式也是不同的。浏览器默认样式的不同，往往给开发带来很大的麻烦，并且影响开发效率 ，这就需要去除元素在浏览器的默认样式。

    可以通过去除元素在浏览器的默认样式，使得HTML元素具有相同的初始样式，然后再对元素进行统一定义，就可以让页面在不同的浏览器中产生相同的显示效果。 

使用方式可以搜索Eric Meyer发布的重置样式表 。

对于CSS reset一些注意：

(1)CSS reset代码必须在其他CSS之前引入

(2)CSS reset代码是应该根据个人需求不同来定义

(3)CSS reset代码也有很多不足，可以审视并修订这段代码再拿来用。

---

本节主要学习了CSS一些规范，最后对其总结。

• 命名规范

• 书写规范

• 注释规范    

• CSS reset