个人css编写规范

Posted 2020-10-12 silinpper

前言：最近在做微信小程序，因为公司小，就我一个人弄前端的东西，js和页面都是我来弄，结果那天后台的人看到我的js代码，说我的代码写得不规范，函数什么的都很乱，弄得我羞愧难当，幸亏没看我的css，其实我的css命名也很随意==！一直觉得自己css其实还是可以的，但是突然发现自己到现在的css还没有很规范，很多名称什么的还很随意，有的地方用驼峰命名，有的又用横杠，有的还会用下划线，真的太随意了，所以就上网搜了搜命名规范，改了两天终于把样式全改过来了。因此做个小结：

意义：感觉规范css代码是非常有意义的，早点有一套自己的规范的话在以后的编写css的时候就可以省去很多想应该怎么命名的时间，从长远的角度还是非常有好处的，其次别人看你的css时就可以一眼知道它代表的是什么意思，最后可以装b，哈哈。

规范：其实我是直接百度“css代码规范”，然后就搜到好多信息，看到知乎里人推荐网易¹的一套前端规范，然后看了看确实不错，就以它为基础整理了自己的css编写规范。

　　分类及命名：

　　一、大体分下面几大类，分别以g-、m- 、u-、f-、s-、z-及自定义x-来命名第一个字母，表明 作用

1. 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
2. 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
3. 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
4. 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
5. 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
6. 状态（.z-）：为状态类样式加入前缀

　　　　ps：为什么要用连字符还是有一些讨论的：CSS样式名中的下划线与连字符

　　二、选择器属性和属性值一律用小写

　　三、每个属性值后面都加分号结尾，即使是最后一个

　　四、省略值为0时的单位 即：0px，0em，0% -> 0

　　五、一律使用单引号

　　六、使用16进制表示颜色（除了透明度用rgba）

　　七、属性与值之间有一个半角空格的间距

　　八、书写顺序²：

　　　　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

最后，写博客也是挺累的，，，真的很佩服网上那些大神，既能写的那么精简，又能幽默风趣，真的让人羡慕呀，没错，我说的就是张鑫旭张大神，任重而道远啊~