标签：编写 驼峰 ext 小技巧 网站 rgb 登录 round grid
前言：最近在做微信小程序，因为公司小，就我一个人弄前端的东西，js和页面都是我来弄，结果那天后台的人看到我的js代码，说我的代码写得不规范，函数什么的都很乱，弄得我羞愧难当，幸亏没看我的css，其实我的css命名也很随意==！一直觉得自己css其实还是可以的，但是突然发现自己到现在的css还没有很规范，很多名称什么的还很随意，有的地方用驼峰命名，有的又用横杠，有的还会用下划线，真的太随意了，所以就上网搜了搜命名规范，改了两天终于把样式全改过来了。因此做个小结：
意义：感觉规范css代码是非常有意义的，早点有一套自己的规范的话在以后的编写css的时候就可以省去很多想应该怎么命名的时间，从长远的角度还是非常有好处的，其次别人看你的css时就可以一眼知道它代表的是什么意思，最后可以装b，哈哈。
规范：其实我是直接百度“css代码规范”，然后就搜到好多信息，看到知乎里人推荐网易1的一套前端规范，然后看了看确实不错，就以它为基础整理了自己的css编写规范。
分类及命名：
一、大体分下面几大类，分别以g-、m- 、u-、f-、s-、z-及自定义x-来命名第一个字母，表明 作用
ps：为什么要用连字符还是有一些讨论的：CSS样式名中的下划线与连字符
二、选择器属性和属性值一律用小写
三、每个属性值后面都加分号结尾，即使是最后一个
四、省略值为0时的单位 即：0px，0em，0% -> 0
五、一律使用单引号
六、使用16进制表示颜色（除了透明度用rgba）
七、属性与值之间有一个半角空格的间距
八、书写顺序2：
1. 位置属性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color- text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)
ps：其实这里面的height和line-heightde位置我是很纠结的，因为其实很多时候我都是直接省略height直接用line-height来撑起来的高度，自己实际上还是没太搞懂line-height 这个属性，需要注意去研究一下！！
九、其他：
一般写css的时候都需要重置一些浏览器默认的css，这里有个优化阅读体验的文章，还可以，里面的把#000纯黑的颜色改成#333这个小技巧很多网站都在用，自己也没在意，因此特地记一下。
缩略词：其实我在改写我的那些css的时候很多时候我都在思考应该怎么缩写那些单词，虽然网易前端规范也写了一些缩略，但是挺少的，正好找了一篇文章，可以在这里查查，实在找不到就百度去吧。常用缩略词：http://blog.csdn.net/yfh1985sdq/article/details/17260429
参考地址：
1 网易前端规范：http://www.shejidaren.com/css-written-specifications.html
2 css书写顺序讨论：http://www.cnblogs.com/wybie/p/3689867.html
3 css编写规范，有例子，界面也很好看，我大体就是参考这个网站个网易前端规范来的：http://nec.netease.com/standard/css-practice.html
最后，写博客也是挺累的，，，真的很佩服网上那些大神，既能写的那么精简，又能幽默风趣，真的让人羡慕呀，没错，我说的就是张鑫旭张大神，任重而道远啊~
标签：编写 驼峰 ext 小技巧 网站 rgb 登录 round grid
原文地址：http://www.cnblogs.com/silinpper/p/7766551.html
