CSS编码规范

从编码规范处，进一步提高自己对CSS的运用。

为什么学习编码规范

如果一个页面样式很复杂，那边就需要写很多的CSS。但随着时间的增加，代码不断累积，一不小心，我们就会看到几百上千行的代码。这个时候回头看那些样式文件，无疑是很痛苦的。假设，你之前写样式是随意的，想到什么就加个什么样式，那更是雪上加霜。要不了一个月，我想你都不想碰这些代码了。

有一个好的CSS编码规范，有很大的帮助：

可以精简自己的CSS，更好处理样式的细节

增强代码的可读性，利于代码维护

CSS编码规范

黄金定律：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。永远遵循同一套编码规范 – 可以是这里列出的，也可以是你自己总结的。

Bootstrap是GitHub上十分火爆的开源项目，也是目前最流行的前端CSS框架。它有着一套非常不错的编码规范，学习它可以极大提高自己的编码水平和代码质量。

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning

Box model

Typographic

Visual

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;
padding: 25px;
margin: 25px;
overflow: hidden;

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

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

/* Misc */
opacity: 1;
}

完整顺序：

// css property order
, order = [
// Positioning
'position'
, 'top'
, 'right'
, 'bottom'
, 'left'
, 'z-index'
// Box-model
, 'display'
, 'float'
, 'width'
, 'height'
, 'max-width'
, 'max-height'
, 'min-width'
, 'min-height'
, 'padding'
, 'padding-top'
, 'padding-right'
, 'padding-bottom'
, 'padding-left'
, 'margin'
, 'margin-top'
, 'margin-right'
, 'margin-bottom'
, 'margin-left'
, 'margin-collapse'
, 'margin-top-collapse'
, 'margin-right-collapse'
, 'margin-bottom-collapse'
, 'margin-left-collapse'
, 'overflow'
, 'overflow-x'
, 'overflow-y'
, 'clip'
, 'clear'
// Typography
, 'font'
, 'font-family'
, 'font-size'
, 'font-smoothing'
, 'osx-font-smoothing'
, 'font-style'
, 'font-weight'
, 'hyphens'
, 'src'
, 'line-height'
, 'letter-spacing'
, 'word-spacing'
, 'color'
, 'text-align'
, 'text-decoration'
, 'text-indent'
, 'text-overflow'
, 'text-rendering'
, 'text-size-adjust'
, 'text-shadow'
, 'text-transform'
, 'word-break'
, 'word-wrap'
, 'white-space'
, 'vertical-align'
, 'list-style'
, 'list-style-type'
, 'list-style-position'
, 'list-style-image'
// Visual
, 'pointer-events'
, 'cursor'
, 'background'
, 'background-attachment'
, 'background-color'
, 'background-image'
, 'background-position'
, 'background-repeat'
, 'background-size'
, 'border'
, 'border-collapse'
, 'border-top'
, 'border-right'
, 'border-bottom'
, 'border-left'
, 'border-color'
, 'border-image'
, 'border-top-color'
, 'border-right-color'
, 'border-bottom-color'
, 'border-left-color'
, 'border-spacing'
, 'border-style'
, 'border-top-style'
, 'border-right-style'
, 'border-bottom-style'
, 'border-left-style'
, 'border-width'
, 'border-top-width'
, 'border-right-width'
, 'border-bottom-width'
, 'border-left-width'
, 'border-radius'
, 'border-top-right-radius'
, 'border-bottom-right-radius'
, 'border-bottom-left-radius'
, 'border-top-left-radius'
, 'border-radius-topright'
, 'border-radius-bottomright'
, 'border-radius-bottomleft'
, 'border-radius-topleft'
, 'content'
, 'quotes'
, 'outline'
, 'outline-offset'
// Misc
, 'opacity'
, 'filter'
, 'visibility'
, 'size'
, 'zoom'
, 'transform'
, 'box-align'
, 'box-flex'
, 'box-orient'
, 'box-pack'
, 'box-shadow'
, 'box-sizing'
, 'table-layout'
, 'animation'
, 'animation-delay'
, 'animation-duration'
, 'animation-iteration-count'
, 'animation-name'
, 'animation-play-state'
, 'animation-timing-function'
, 'animation-fill-mode'
, 'transition'
, 'transition-delay'
, 'transition-duration'
, 'transition-property'
, 'transition-timing-function'
, 'background-clip'
, 'backface-visibility'
, 'resize'
, 'appearance'
, 'user-select'
, 'interpolation-mode'
, 'direction'
, 'marks'
, 'page'
, 'set-link-source'
, 'unicode-bidi'
, 'speak'
]