/* 和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; }