Appearance
CSS 书写顺序
为什么要规定书写顺序
由于浏览器渲染 DOM 存在
reflow(回流)
和repaint(重绘)
机制,所以应一定顺序写,尽量减少回流和重绘,具体不多解释。确定的书写顺序会让同事阅读、维护代码更方便。
优先级
优先级高的先写,低的后写。
脱离正常布局流的属性:position left top right bottom float z-index
展示属性:display overflow clear flex- grid- ...
盒子属性:width height padding border margin background ...
文字修饰:font-family font-size font-style font-weight font-varient color text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow ...
不影响布局的修饰属性:content box-shadow border-radius ...
变化动画:transform animation ...
举例
css
.xx {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 40px;
font-size: 14px;
text-align: right;
box-shadow: 0 0 1px 1px red;
transform: rotate(7deg);
}
html
<div class="absolute top-0 left-0 block"></div>