写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到5,那么写的时候就是这样的: