Pospal

Appearance

规范 ​

CSS 规范的目的在于使我们的 CSS 代码更加易于维护和重用，同时也适用于各种 CSS 预处理器。

颜色 ​

颜色 16 进制用小写字母； 颜色 16 进制尽量用简写。

css
/* ✗ avoid */
.element {
  color: #abcdef;
  background-color: #001122;
}

/* ✓ ok */
.element {
  color: #abcdef;
  background-color: #012;
}

属性简写 ​

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；

margin 和 padding 相反，需要使用简写；

常见的属性简写包括：

  • font
  • background
  • transition
  • animation
css
/* ✗ avoid */
.element {
  transition: opacity 1s linear 2s;
}

/* ✓ ok */
.element {
  transition-delay: 2s;
  transition-timing-function: linear;
  transition-duration: 1s;
  transition-property: opacity;
}

媒体查询 ​

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

css
.element {
    ...
}

.element-avatar{
    ...
}

@media (min-width: 480px) {
    .element {
        ...
    }

    .element-avatar {
        ...
    }
}

杂项 ​

  • 不允许有空的规则
  • 元素选择器用小写字母
  • 属性值'0'后面不要加单位
  • 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系
  • 不要在一个文件里出现两个相同的规则
  • 用 border: 0; 代替 border: none;
  • 尽量少用'*'选择器