今天我们来聊聊开发时候的一些代码规范。
很多小伙伴，特别是刚开始学习前端的小伙伴，不会去留意自己的开发规范，导致后期会有很多不好的习惯。
那为什么需要拥有好的规范的呢，这样说的意义是什么。
1、提高团队的协作能力
亲身体验，记得有一天同事生病了，我接手了他的项目，当看到他的代码时。。。。。
乱的不行，瞬间懵逼了，一点想敲代码的欲望都没有了。
2、提高代码的复用利用率
优秀的代码，逻辑是清晰的，依赖少，易于维护，复用率高，极大的提高开发效率。
3、可以写出质量更高，效率更好的代码
4、为后期维护提供更好的支持
各位可以试试，不去规范的编写代码，注释不加样式乱放，过一个月甚至只要一个星期，回去看这些代码肯定又是懵逼状态，甚至想爆粗口。
今天我们聊的就是css模块中的开发规范
1、选择器的使用
当构建选择器时应该使用清晰，准确和有语义的 class 名。尽量减少使用标签选择器。如果你只关心你的 class 名，而不是你的代码元素，这样会更容易维护。
不推荐
div.content > header.content-header > h2.title {
color
: red;
}
推荐
.content > .content-header > .title {
color: red;
}
2、class 命名
class 名称应当尽可能短，并且意义明确。使用有意义的名称，使用有组织的或目的明确的名称，不要使用表现形式的名称。很多初学者喜欢用拼音命名，这是万万不可取的。
不推荐
.aaa-123 {font-weight:800;}
.abc
{color:red;}
推荐
.header-info {font-weight:800;}
.important {color:red;}
tips:使用中划线（-）分隔 class 中的单词。虽然它很不方便的让你双击选择，但是它可以增强理解性。另外属性选择器 [attribute|=value] 也能识别中划线（-），所以最好坚持使用中划线作为分隔符。
不推荐
.slide_left {}
.slide_right
{}
推荐
.slide-left {}
.slide-right
{}
基于最近的父 class 或基本 class 作为新 class 的前缀。
不推荐
.header .logo {}
.header .banner
{}
推荐
.header-logo {}
.header-banner {}
3、属性简写
css 提供了各种简写属性（font、background等等），使用简写属性对于代码效率和可读性是有很有用的。
不推荐
padding-bottom: 1px;
padding-left: 2px;
padding-right: 3px;
padding-top: 4px;
推荐
padding: 4px 3px 1px 2px;
4、减少选择器的嵌套
在写选择器时，要尽可能的减少嵌套层级，一般 2~3 层，不要超过 4 层。
不推荐
.list ul li a span {}
推荐
.list span {}
5、声明顺序
为了保证更好的可读性，我们应该遵循以下顺序：
结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
6、省略 0 后面的单位
不要在 0 值后面使用单位。
不推荐
.margin-bottom: 0px;
推荐
.margin-bottom: 0;
7、使用 16 进制表示颜色值
css 中的颜色值可以使用 16 进制来表示，在可能的情况下，可以进行缩写，比如：#ccc、#999。
8、引号
属性选择器或属性值用双引号（""），而不是单引号（''）括起来。url 的值不要使用引号。
就先写到这吧，这些是比较常见的css代码规范。磨刀不误砍柴工，在刚开始学习的时候就养成这些良好的习惯，在以后的开发道路上受益匪浅。让自己的代码优雅起来，别让他人看到自己的代码第一感觉只有廉价二字。
技术上不懂的小伙伴可以留言啦，也可以关注下面的二维码，每天都会有干货更新啦！后期会有学习资料免费赠送给小伙伴们哦！
