# CSS 规范

# 规范示例

[选择器] {
  [属性]: [属性值];
}

[选择器] {
  [属性]: [属性值];
}

# 规范说明

选择器和左大括号（{）之间需要一个空格；
属性代码在左大括号（{）下一行编写，之间不留空行；
属性前保留两个空格；
每一行只写一个属性；
属性和分号（:）之间不留空格；
分号（:）和属性值之间，只保留一个空格；
属性值后面必须加分号（;），最后一个属性值也需要；
右大括号（}）必须单独一行；
不同选择器之间必须隔一行；
颜色值统一使用小写；

针对以上规范，给出相应的错误示例。

# 声明顺序推荐

位置属性(position, top, right, z-index, display, float 等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align 等)
背景(background, border 等)
其他(animation, transition 等)

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

# less 嵌套顺序

当前选择器的样式属性
当前选择器的伪类样式(:first-letter,:hover,:active etc)
当前选择器的伪类元素(:before,:after)
子选择器部分

.parent {
  color: red;

  &:first-letter {
    font-size: 30px;
    font-weight: bold;
  }

  &:before {
    position: absolute;
  }

  .child {
    width: 100px;
  }
}

← 命名 ESLint →