写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-listli{}
· /*good*/
.index-list.item{}
· 媒体查询，不要写在文档最后或分开到另外文档，应该写在相应规则的附近，这样有利于修改和阅读
· .index-nav{
· margin-top: 10px;
· }
· /*和相关的规则一起放*/
· @media (min-width: 480px){
· .index-nav{
· margin-top: 5px;
· }
}
· 前缀，css3的一些属性要注意带上前缀：
· .selector {
· -webkit-box-shadow: 01px2pxrgba(0,0,0,.15);
· box-shadow: 01px2pxrgba(0,0,0,.15);
}
· 引号方面，使用双引号而不使用单引号,url不用使用引号：
· /*nogood*/
· .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组，从上到下依次书写：
1. Positioning Model（定位的相关属性）：
· 有position，display，TRBL，z-index，float，overflow等
2. Box Model （盒子模型的属性）：
· 有margin，padding，border，width，height等
3. Typographic （文本，排版）
· 有font，line-height，text-align
4. 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的命名单词长度不要太长太冗余，看懂就好，有些单词过长可以适当的缩写一下。