css代码书写规则

CSS的书写最好也按照这种规则，CSS书写顺序的判断依据是 css代码影响的方面，例如，影响元素位置的属性 left top，影响元素长相的 color background，字体 font-size font-weight，这些有同类功能的最好都写在一起

另外，我习惯于把能引起页面回流的放在能引起页面的重绘属性的前面，对元素 影响程度 越高的属性越放在最前面，至于什么叫 影响程度 我也说不清楚，下面是我一般写 css的属性的顺序，大家可以自行领悟一下

<!-- position 放在最前面 -->
position: relative;
<!-- 然后是参照 position 进行定位的属性 -->
top: 100px;
left: 10px;
<!-- 然后是宽高 -->
width: 100px;
height: 100px;
line-height: 20px;
<!-- 然后是 margin padding -->
margin: 10px;
padding: 20px 30px;
<!-- font -->
font-size: 20px;
font-weight: 700;
<!-- border -->
border: 1px solid red;
border-radius: 4px;
<!-- background -->
background-color: pink;
<!-- z-index -->
z-index: 10;

一开始我也不习惯这种略带有束缚的写法，但是时间长了就习惯了，这些属性的书写顺序，完全不用思考就迅速依次写下，甚至有时候看到别人写的乱七八糟不符合自己习惯的写法，还会顺手改一改。

这样做的好处是易于查找和维护，想改 width，那就肯定是在这个元素 css属性序列的最前面，想改 background，那肯定就从后面扫，也避免了在元素属性过多的情况下，可能导致的某个属性出现多次的情况，我曾经不止一次在代码库中看到某个属性，例如 background写了两次的事情，一个 background写在属性序列的上半部分，然后可能由于这个元素的属性太多,后来维护的人没有看到那个 backgound，或者太乱了也不想看，于是就直接在属性序列的最后面又写了一个

抛开上述的好处不说，最起码这种有条理、有顺序的书写次序，对于某些星座的人来说，看着也赏心悦目，无形之中也能让自己与外面那些妖艳贱货区别开来。

参考资料：

https://juejin.im/post/5b99c824f265da0ac55e3980?utm_source=gold_browser_extension