CSS规范

1、命名规范

命名规范的困扰不仅是新学习前端人员还是那些css开发时间很长的人员都很困扰。一个好的良好命名规范，不仅可以提高代码的阅读体验，而且对搜索引擎也是非常重要的

命名规范包括两个主要的方面：

  css文件命名、id命名、class命名

下面是网页页面常用的命名规范建议

网页主题部分命名

网页部分	命名
最外层	wrapper(一般用于包裹整个页面)
头部	header
内容	content
侧栏	sidebar
栏目	column
热点	hot
新闻	news
下载	download
标志	logo
导航条	nav
主体	main
左侧	main-left

右侧	main-right
底部	footer
友情链接	friendlink
加入我们	joinus
版权	copyright
服务	service
登陆	login
注册	register

导航命名

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

菜单命名

网页部分	命名
菜单	menu
子菜单	submune

其他命名

网页部分	命名
标题	title
摘要	summary
登陆条	loginbar
搜索	search
标签页	tab
广告	banner
小技巧	tips
图标	icon
法律声明	siteinfolegal
网站地图	sitemap
工具条	tool、toolbar
首页	homepage
子页	subpage
合作伙伴	parter
帮助	help
指南	guide
滚动	scroll
提示信息	msg
投票	vote
相关文章	related
文章列表	list

书写规范

好的书写规范，可以方便阅读和后期维护

属性类别	举例
影响文档流的属性（布局属性）	display、float、position、clear等
盒子自身模型的属性	width、height、margin、padding、border、overflow等
文本属性	font、text-align、line-height、vertical-align、text-index等
装饰属性	opacity、cursor、backgroundcolor、color等
其他属性	content、list-style、quotes等

重要性自上而下，这种主次分明的排列顺序，极大的提高了代码的可阅读性和可维护性

例如下代码所示

#main
{
  /*影响文档流属性*/
 display:inline-block;
 position:absolute;
 top:0;
 left:0;
 /*自身盒模型的属性*/
 width:300px;
 height:300px;
 border:1px solid red;
 /*文本属性*/
 text-alian:center;
 font-size:15px;
 text-index:2em;
 /*装饰性属性*/
 color:blue;
 backgroundcolor:black;
 /*其他属性*/
 cursor:pointer;



}

 

其实不需要一定要按照里面比如影响文档流属性要写在自身盒模型属性的前面，因为css中的属性是随着开发的逐步需求添加的，我们只需要css代码顺序符合规范，这样可以方便我们阅读以及维护

注释规范

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

/*
 *@description:说明
 *@author:作者
 *@updata:更新时间 如2016-4-19 18:30
*/

 模块注释是各个模块的注释

举例：

/*导航部分，开始*/

...

/*导航部分结束*/

 

简单注释分为单行注释和多行注释。一般用于注释一些功能代码

单行注释：

/*单行注释内容*/

多行注释:

/*

*注释内容

*注释内容

*/

 

注意在发布阶段我们文件需要压缩才能发出去，但是压缩工具会把注释都删掉，有时候为了保留一些版权声明注释我们可以采用下述办法：

/*! 注释内容*/

压缩工具就不会删掉它

 

CSS reset

Q：什么是css reset

A：在HTML中有很多元素都具有默认样式，css reset指的就是重置样式，就是去除浏览器中的默认样式，把整个页面改造成我们所要的。

常见HTML默认样式

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

Q：为什么要使用CSS reset

A：现在浏览器有非常多，主流有Chrome、FireFox、IE、Safari、Opera等，不同的浏览器，默认样式是不一样的，比如说ul元素的缩进在FireFox中是通过padding来实现的而IE中却是margin来实现的，再说

button元素，在IE、Chrome、FireFox中的默认样式也不一样。这样会给我们的开发带来很大的不变，所以我们需要去除浏览器中的默认样式

 

不推荐使用

*{ padding:0;margin:0;}

因为这个方法性能非常低，它把所有元素的padding、margin都去掉了，然而我们需要的表格元素或者input的margin和padding我们是不需要去掉的，而且它只能消除padding和margin像strong的加粗它也无能为力

所以我们推荐使用css专家Eric Meyer的重置表（2011年0126发布的）参考地址：http://meyerweb.com/eric/tools/css/reset/。

 

完整代码如下：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}