CSS 代码格式规范

2019-1-13 11:05| 作者: admin| 查看: 6157| 评论: 0|来自: 蚂蚁部落

良好的代码组织方式,可以提高可读性,对于团队开发和后期维护的意义不言而喻。

再强调一下,后面所谓规范只是最佳实践,并不具有强制性,目的是提高团队开发效率和后期维护的便利性。

也就是说,即便不遵守后面的规范,代码依然有效,本文分享几种常见的能够提高可读性的规范供大家参考借鉴。

当然,还有其他方式提高可读性,比如科学的CSS属性排列与引号使用,考虑到篇幅,参阅其他相关文章。

(1).代码缩进:

恰当的缩进可以使代码更加清晰,便于团队和做或者后期维护。

当然,在实际部署的时候,可能会进行压缩,这不是本文要关注的。

缩进两个空格,不能使用tab或者tab与空格混搭进行缩进,代码片段如下:

[CSS] 纯文本查看 复制代码
.selector {
  padding:15px;
  margin:0px 0px 15px;
}

(2).选择器分组换行:

关于分组选择器的基本用法可以参阅CSS E,F 选择器一章节。

可以将构成分组的子选择器单独占据一行,这样会更加清晰,代码示例如下:

[CSS] 纯文本查看 复制代码
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
}

上面的代码是不是更加清晰,再强调一下,咱们这是便于开发与团队合作优先。

至于上述方式可能会增加的额外负担,可以通过压缩等方式来消除。

(3).空格与换行:

为了可读性或者说为了好看,建议在选择器与大括号之间添加一个空格。

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110755a7popg28jovbpirf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,选择器后面加了一个空格,看起来更加舒适一些。

同时,大括号的后半部分(})需要单独占据一行。

CSS主体部分的每一声明也需要一定的格式:

(1).声明的冒号(:)与属性值之间添加一个空格。

(2).每一条声明需要单独占据一行。

(3).最后一条声明语句后面的分号是可以省略的,但是建议保留。

(4).如果大括号中只有一条声明语句,那么大括号可以在同一行,代码如下:

[CSS] 纯文本查看 复制代码
.selector { padding: 15px; }

有些属性的属性值可以是多个,那么属性值之间需要额外空格,以提高可读性。

代码片段如下:

[CSS] 纯文本查看 复制代码
div{
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

对于box-shadow类似属性值,值之间用逗号分隔,并且额外添加一个空格,如果属性值较多,可以进行换行缩进操作,以提高可读性,以background-image属性为例子,代码片段如下:

[CSS] 纯文本查看 复制代码
div{
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
  );
}

但是 rgb()、rgba()、hsl()、hsla() 或 rect() 的参数不需要添加空格。

>、+、~等选择器两端也要添加空格,否则视觉上看起来过于拥挤,代码演示如下:

[CSS] 纯文本查看 复制代码
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

(4).CSS规则之间增加一行:

为了增加可读性,CSS规则之间使用一个空行分隔。

代码片段如下:

[CSS] 纯文本查看 复制代码
.selector-secondary {
  display: block;
  width: 200px;
}
   
.selector-three {
  display: span;
  font-size: 12px;
}

上面的代码可读性会明显提高,尤其是在代码量大的时候,否则看起来非常拥挤。

(5).简写属性:

CSS中有很多复合属性,如有可能,最好使用属性的简写形式。

好处主要有两点,首先节省了代码量,第二个有利于后期维护与阅读。

代码演示如下:

[CSS] 纯文本查看 复制代码
margin:5px 15px 35px 45px;

上面仅以外边距为例子作为演示。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部