选择器

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器

推荐:

.selector {}
.selector li {}
.selector li p{}

不推荐:

* {}
#selector {}
.selector div {}

代码缩进

  • 统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)

  • 用两个空格来代替制表符(tab)

分号

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

.selector {
  width: 100px; /* good */
  height: 100px; /* good */
  height: 100px /* bad */
}

代码易读性

左括号与类名之间一个空格,冒号与属性值之间一个空格

.selected { 
  width: 100%; /* good */
  width:100%; /* bad */
}

逗号分隔的取值,逗号之后一个空格

.selector {
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; /* good */
  box-shadow: 0 1px 2px #ccc,inset 0 1px 0 #fff; /* bad */
}

为单个css选择器或新声明开启新行

.selector,
.selector-secondary,
.selector-third {
  padding: 15px;
  margin-bottom: 15px;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格,且取值不要带有不必要的 0

.selector {
  background-color: rgba(0,0,0,.5); /* good */
  background-color: rgba(0, 0, 0, 0.5); /* bad */
}

属性值十六进制数值应全部小写并且尽量用简写

.selector {
  background-color: #fff; /* good */
  background-color: #FFF; /* bad */
  background-color: #ffffff; /* bad */
}

不要为 0 指明单位

.selector {
  margin: 0 10px; /* good */
  margin: 0px 10px; /* bad */
}

css属性值需要用到引号时,统一使用单引号

.selector {
  font-family: 'Hiragino Sans GB'; /* good */
  font-family: "Hiragino Sans GB"; /* bad */
}

属性声明顺序

  1. Positioning 定位属性
  2. Box model 盒模型属性
  3. Typographic 字体排版属性
  4. Visual 可见属性
  5. Misc 其他属性

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

媒体查询(Media query)的位置

将媒体查询尽可能放在相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

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

单行规则声明

对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。

.selector { width: 60px; }

简写形式的属性声明

在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如:paddingmarginfontbackgroundborderborder-radius

大部分情况下,我们不需要为简写形式的属性声明指定所有值。例如,HTML 的 heading 元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

注释

代码是由人编写并维护的。请确保你的代码能够自我描述、注释良好并且易于他人理解。

对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。

/* Comment Text */
.selector {}

class 命名

  • ClassName 的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用破折号 “-” 连接
  • 避免过度任意的简写
  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀
/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
Copyright © Sodo Tech 2014-2018 all right reserved,powered by Gitbook最后更新: 2019-01-11 17:14

results matching ""

    No results matching ""