CSS编码规范之书写格式

不同的人有不同的编码风格，但是为了写出更高效易读的代码，还是要遵守一定的规范的~

这些规范是在团队开发过程中，集思广益总结出来的，不是很全面，如果你有更好的意见，不妨留言告知我们，我们一起打造一个良好的前端生态环境！

CSS书写规范

1、简写命名

应该尽量简写类名和id名，但前提是要让人看懂你的命名才能简写哦！

2、不要随意使用id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

3、应该采用” - “对class中的字母分隔

 class命名中不要出现大写字母，不要使用“_”下划线来命名CSS选择器。如：

.hotel-title { /* 正确的写法 */ 
    font-weight: bold; 
} 
.hotelTitle { /* 不推荐的写法 */ 
    font-weight: bold; 
}
.hotel_title { /* 不推荐的写法 */ 
    font-weight: bold; 
}

用”-“隔开比使用驼峰是更加清晰;用”-“能良好区分JavaScript变量命名（JS变量命名是用“_”）

4、多选择器之间应该换行

/* 正确的写法 */ 
 a.btn, 
 input.btn, 
 input[type="button"] { 
 ...... 
 }
/* 推荐的写法 */
 a.btn, input.btn, input[type="button"] { 
 ...... 
 }

5、使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

6、色值用16进制颜色代码

颜色代码尽量缩写。不要用颜色英文单词！有透明度要求的时候才用rgba。

7、tab键用四个空格代替

因为在不同系统的编辑工具对tab解析不一样，统一tab长度，代码更美观。一些童鞋可能会有疑问，tab键换成四个空格，多麻烦啊？其实不然，平时用sublime text中就可以对tab键进行设置，在右下角。

8、每个样式属性后加 “;”

方便压缩工具”断句”。

9、空格的使用，遵循以下规则：

选择器与“ {“ 之间要有空格；属性名的与”:” 之间不要有空格；”：”与属性值之间要加空格

.hotel-content { 
    font-weight: bold; 
}

10、不要将样式写为单行

.hotel-content {
    margin: 10px; background-color: #efefef;/*不推荐的写法*/
}

单行显示不好注释，不好备注，这应该是压缩工具的活儿。

11、不要向 0 后添加单位

.obj { 
    left: 0px; /*不推荐的写法*/
}

这样能减小CSS文件。

12、不要使用行内样式

p style="font-size: 12px;"全宇宙李赵最好看~/p/*不推荐的写法*/

像这样的行内样式，最好用一个class代替。可以写fz-12、hide这样的类名备用。尽量做到样式和结构分离。

.fz-12 { 
    font-size: 12px;
}
.hide { 
    display: none; 
}

13、推荐使用reset.css样式

推荐网站：http://www.cssreset.com/

14、链接的样式，务必按照这个顺序来书写

a:link - a:visited - a:hover - a:active

15、等你补充…

完

按识别二维码，加关注！

关注给洗衣服哦~

始发于微信公众号： 前端麻辣烫