Skip to content
On this page

CSS 书写顺序

为什么要规定书写顺序

  1. 由于浏览器渲染 DOM 存在reflow(回流)repaint(重绘)机制,所以应一定顺序写,尽量减少回流和重绘,具体不多解释。

  2. 确定的书写顺序会让同事阅读、维护代码更方便。

优先级

优先级高的先写,低的后写。

  1. 脱离正常布局流的属性:position left top right bottom float z-index

  2. 展示属性:display overflow clear flex- grid- ...

  3. 盒子属性:width height padding border margin background ...

  4. 文字修饰: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 ...

  5. 不影响布局的修饰属性:content box-shadow border-radius ...

  6. 变化动画: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>

杨亮的前端解决方案