CSS编码规范之书写格式

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 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、等你补充…

按识别二维码,加关注!

关注给洗衣服哦~

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

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS编码规范之书写格式


 上一篇
Photoshop投影与CSS中box-shadow的转换 Photoshop投影与CSS中box-shadow的转换
box-shadow是给元素块添加周边阴影效果,基本语法是: {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} {box-shadow:方向    
2021-04-05
下一篇 
10个Chrome基础使用技巧 10个Chrome基础使用技巧
Chrome是前端开发中最常用到的一个浏览器,本文整理了Chrome的10个基础使用技巧(Chrome中有很多和Sublime Text2类似的快捷键)。如果有其它本文未提及的实用的小技巧,也可以留言告诉我们。 当项目中文件很多时,可以在控
2021-04-05