属性在书写时,应按功能进行分组,以
Formatting Model(布局方式、位置)
Box Model(自身、尺寸)
Typographic(文本)
Visual(视觉效果、其他属性)
顺序书写,以提高代码的可读性。
Formatting Model 属性包括:position / top / right / bottom / left / float / display / overflow
Box Model 属性包括:border / margin / padding / width / height
Typographic 属性包括:font / line-height / text-align / word-wrap / white- space / text-decoration
Visual 属性包括:background:linear-gradient … / color / transition / list-style / cursor / border-radius / box-shadow / text-shadow
.sidebar {
/* formatting model(布局方式、位置): position / overflow / z-index / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model(自身、尺寸) : sizes / margin / padding / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic(文本) : font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
/* visual(视觉效果、其他属性) : colors / shadows / gradients / ... */
color: #333;
background: #f5f5f5;
border-radius: 10px;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}