CSS编码规则

/* 和HTML一样使用两个空格来代替制表符 */
div {  /* 为了代码的易读性，在每个声明块的左花括号前添加一个空格 */'
  padding: 15px;  /* 每个声明语句的:后应该插入一个空格 */
} /* 右花括号单独成行 */

/* 为了获得更准确的错误报告，每条声明都应该独占一行 */
.selector,
.selector-secondary,
.selector[type="text"] {
	/* 不要在rgb()、rgba()、hsl()、hsla()或rect()值的内部的逗号后面插入空格 */
	background-color: rgba(0,0,0,0.5);
}

/* 声明顺序，相关的属性声明应当归为一组，并按照下面的顺序排列
	· Positioning（定位）
	· Box model
	· Typographic
	· Visual
	· Misc
 */
.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;
	
	/* Typographic */
	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 {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
          box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* 对于只包含一条声明的样式，放在一行，多条声明的样式分为多行 */
.span1 { width: 60px; }