代码格式化

样式书写一般有两种:一种是紧凑格式 (Compact),一种是展开格式(Expanded),统一使用展开格式书写样式,即:

.jdc {
    display: block;
    width: 50px;
}

代码大小写

样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

.jdc{
    display:block;
}

选择器

  • 尽量少用通用选择器
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
  • 选择器不要超过4层
.jdc {}
.jdc li {}
.jdc li p{}

代码缩进

使用soft tab(2个空格)。

分号

每个属性声明末尾都要加分号。

.element {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

空格

以下几种情况不需要空格:

  • 属性名后
  • 多个规则的分隔符','前
  • !important '!'后
  • 属性值中'('后和')'前
  • 行末不要有多余的空格

以下几种情况需要空格:

  • 属性值前
  • 选择器'>', '+', '~'前后
  • '{'前
  • !important '!'前
  • @else 前后
  • 属性值中的','后
  • 注释'/'后和'/'前
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}
.element,
.dialog {

}
.element > .dialog{
    ...
}
.element {
    ...
}
@if {
    ...
} @else {
    ...
}

属性书写

建议遵循:

1、布局定位属性:display / position / float / clear / visibility / overflow
2、自身属性:width / height / margin / padding / border / background
3、文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

媒体查询

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

属性简写

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

marginpadding 相反,需要使用简写;

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

扫描二维码,分享此文章

郭德臣