CSS的书写方式

写CSS对于干这行当的人来说，稀松平常，没啥的。就像让你写个带背景、阴影、有边框、内外边距、水平垂直居中的卡片，三两下就搞出来了。

是否曾想过有过自己的一套书写方式？自己的行为规范或者现在给自己定个准则？

写的多了、久了，就会慢慢的，慢慢的发现，修改的时候你总要在编辑器里拖来拖去（假设你的写法是下面这样子的，假设有横向滚动了，不能很快的定位你要的样式属性），当然了这只是其中之一个理由....

.a { margin: 0 auto ... display: block; }
.b { position: relative ... font-size: 12px; }
.c { ... }

我们写的时候大部分都是，先看到什么，写什么，想到什么，写什么，最终目的就是把需要的还原出来就可以了。

就像前面所说的例子，写个卡片，你的样式怎么写？这样？

.card {
    background: ...;
    box-shadow: ...;
    border: ...;
    margin: ...;
    padding: ...;
    transform: ...;
    font-size: ...;
    display: ...;
}

这样写有什么问题么？没问题...

下次写的时候你还会是这个顺序写吗？

那下下次、下下下次...呢？

我们从浏览器的解析角度来看，浏览器的解析方式是，从末尾往前、从下往上、从右往左(指一行样式声明）的读取，直至到达.card这里，然后应用样式。

那么在这个读取的过程中，有什么规则呢？有的，以下是浏览器的解析方式：

1. 背景颜色

2. 背景图片

3. 边框

4. 子代

5. 轮廓

从1到5，那么写的时候就是这样的：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!