文章转载自：https://www.cnblogs.com/Ry-yuan/p/7384149.html
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不用使用引号：
/*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写得太不规范，也不容易维护，想要去修饰好，所以写写博客来强迫自己去改正，博客是个好东西，写给自己看看同时也写给别人看，所以这会有约束，从而不断的修饰改正错误，从中自己也会学到很多东西，可谓春风十里不如写博客。
学习永无止境，专注前端
网友评论