CSS规范--春风十里不如写好CSS
先吟几句：
最近看了看春风十里不如你，本来很少看剧的，暑假有点闲就看了，感觉不错，挺喜欢这部剧，就套了个名字，嘿嘿嘿。剧里面印象深刻的是《致橡树》这首诗，念几句：
我如果爱你,绝不像攀援的凌霄花，借你的高枝炫耀自己;
我如果爱你,绝不学痴情的鸟儿，为绿荫重复单调的歌曲；
也不止像险峰，增加你的高度，衬托你的威仪。
不骚了，回到正题，写css也一样需要爱，你爱一门技术就要用心付出，对知识寸土必争，寸草必得。写css容易，写好就需要下功夫了。如果我爱你，就会去研究怎么去写好你，下面先说说怎么规范的写css。
css语法规范：
- 每条属性声明占一行，增加易读性
/*bad*/
body{margin: 0;padding: 0;}
/*good*/
body{
margin: 0;
padding: 0;
}
- 颜色采用十六进制写法（不使用颜色名），并且能够简写的进行简写:
/*bad*/
.example{
color: #ffaabb;
}
/*good*/
.example{
color: #fab;
}
- 0值的单位进行省略，如将margin:0px，写成margin:0:
/*bad*/
.example{
margin: 0px;
}
/*good*/
.example{
margin: 0;
}
- 有选择器组时，每个选择器占一行：
body,
html,
p{
margin: 0;
padding: 0;
}
- 连字符使用-，而不使用_，因为能少按一个shift就少按，还有和js变量命名区分开。
/*bad*/
.index_list {}
/*good*/
.index-list {}
- 选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式，其次会对选择器寻找上也会在一定程度上浪费时间)
/*bad*/
.index-list li{}
/*good*/
.index-list .item{}
- 媒体查询，不要写在文档最后或分开到另外文档，应该写在相应规则的附近，这样有利于修改和阅读
.index-nav{
margin-top: 10px;
}
/*和相关的规则一起放*/
@media (min-width: 480px){
.index-nav{
margin-top: 5px;
}
}
- 前缀，css3的一些属性要注意带上前缀：
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
- 引号方面，使用双引号而不使用单引号,url不用使用引号：
/*no good*/
.example{
font-family: 'Times New Roman',Georgia,Serif;
background: url("../images/icon.png");
}
/*good*/
.example{
font-family: "Times New Roman",Georgia,Serif;
background: url(../images/icon.png);
}
- 每条属性声明语句结束后加上分号，最后一条声明可省略分号，但不建议
- 每个属性声明的冒号（:）后添加一个空格
- 小于1的小数点的值，省略0，如0.5px，可写成.5px
- 避免使用@ import指令。应使用link标签来引入css文件
- 避免使用!important，这个优先级最高，滥用会使得维护困难，代码混乱
- Less,Sass等预处理言的嵌套不超过3层
- 避免使用id:(因为id优先级高，且具有唯一性，复用性差，而且id是html与js的挂钩，class是HTML与css的挂钩，这样能够让代码更为的清晰，不用说看到一个id，既要到js里查查有没有什么用，又到css里看看有什么样式，确实麻烦。)
- 注释需要全面易懂，不要只写一点
css属性声明顺序规范：
css属性的书写顺序大致分为4组，从上到下依次书写：
- Positioning Model（定位的相关属性）：
- 有position，display，TRBL，z-index，float，overflow等
- Box Model （盒子模型的属性）：
- 有margin，padding，border，width，height等
- Typographic （文本，排版）
- 有font，line-height，text-align
- Visual （视觉方面的）
- 有background，color，transition，list-style
例子：
.example{
content: "hello";
/*positioning*/
position: absolute;
top: 10px;
left: 12px;
/*box model*/
margin-top: 20px;
width: 100px;
heith: 100px;
/*typographic*/
text-align: center;
font-size: 12px;
/*visual*/
color: #f00;
background-color: #0f0;
}
特别的：如果有content属性时，需要把其放到最前面
css的文件分类：
文件分类这不会有什么标准，分好，适合自己开发和维护便可。比如：可以有公共的css，某个页面的css，重置的css，皮肤的css，部件的css等，可根据自己的需求，习惯等分类。不必太过拘束。
- common.css（通用）
- main.css（主要）
- reset.css（重置）
- skin.css（皮肤）
……
css选择器命名：
命名这东西可以说让每个前端开发的人员苦恼的东西，有时得想半天去想一个名字，煎熬啊。老是想，到底怎么样的命名才比较好呢？我这样命名接着会不会重复？等等。。。
到底怎样命名才比较规范，参考一下NEC规范或者是BEM规范。个人比较喜欢NEC，因为其比较简约些,详细的可以到NEC官网上看看。
看看NEC的分类：
- 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
- 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
- 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
- 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
- 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
- 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）
我们参考NEC的分类命名的规范，学习学习它的命名，可以照着使用，也可以有自己不同的命名，可以根据团队的习惯等。规矩是死的，人是活的，能灵活去变通才是最好的，能够写出清晰易懂的代码就ok。
css命名常用单词：
- 头：header
- 尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 外围容器：wrapper
- 登录条：loginbar
- 标志：logo
- 广告：banner
- 页面主体：main
- 热点：hot
- 新闻：news
- 下载：download
- 子导航：subnav
- 菜单：menu
- 子菜单：submenu
- 搜索：search
- 友情链接：friendlink
- 页脚：footer
- 版权：copyright
- 滚动：scroll
- 内容：content
- 标签页：tab
- 文章列表：list
- 信息：msg
- 小技巧：tips
- 标题：title
- 加入：joinus
- 指南：guild
- 服务：service
- 注册：regsiter
- 状态：status
- 投票：vote
- 合作伙伴：partner
- 容器：container
- 按钮：button
单词这方面能看懂就好，英语也要学号才行啊，有时候不懂怎么命名，就查查英文单词怎么写，看得出英语还是很重要啊。css的命名单词长度不要太长太冗余，看懂就好，有些单词过长可以适当的缩写一下。
最后说说：
如果想学好一门技术，就想要从各个方面研究他，本文也是，了解css也要css的规范，这对于强迫症的人就是很好的疗药，我就是这样，总觉得自己的css写得太不规范，也不容易维护，想要去修饰好，所以写写博客来强迫自己去改正，博客是个好东西，写给自己看看同时也写给别人看，所以这会有约束，从而不断的修饰改正错误，从中自己也会学到很多东西，可谓春风十里不如写博客。
