个人的CSS书写规范

成为前端工程师也有了一定的时间，在工作中偶尔也会发现自己的同学们在同一个项目上的书写规范问题成为了两人沟通和代码可读性的障碍。

作为一名前端工程师，CSS的书写规范也是十分重要的。这里我来分享一下我的一些书写心得。

首先是CSS中元素的书写位置：

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等)

之所以这样写第一是增强了代码的可读性，第二在一些极端情况下，页面的加载会更加有序。

第二点是关于代码的缩写：

这里我只能举一个比较常用的例子来说，比如说margin这个类型，大家都知道margin中又margin-top,margin-left,marign-bottom和margin-right这四类。初学者会因为可能定义的类型不同将这里面的一个个定义,类似于这样

.nav li{

.....

margin-bottom:3em;

margin-left:2em;

margin-right:2em;

margin-top:0;

.....

}

这样的代码又臭又长，我们何不用缩写来提高用户阅读体验和代码精简呢？比如我可以这样写：

.nav li{

.....

margin: 0 2em 3em;

.....

}

其实像padding和font也都是同样道理。

说到缩写，我不得不说关于CSS中16进制的颜色代码缩写

像白色是#fff 黑色是#000，有许多同学都想把它们补全，其实没有这个必要。

还有就是想#eebbcc这样的也可以将他们缩写成为#ebc

最后我在和大家分享一下我当年还是刚学CSS的一个小错误吧，有关class 和 id 的使用的。

大家也都清楚id 在js中是唯一的，不能多次使用，而使用class类的话却能够重复使用。所以在确定只有一个的情况下我才有可能使用id。

另外id的优先级是大于class的，所以id应该看当时的情况使用，而不能滥用。