CSS书写顺序

在前端设计中，常常运用xhtml+css进行网页布局，实现了表现与结构的分离。CSS根据作用不同可分为”显示属性”、”自身属性”和”文本属性”,由于CSS是按照自上而下的顺序加载的，所以设计蜂巢建议书写顺序：”显示属性”=>”自身属性”=>”文本属性”。

以下是Mozilla建议的CSS书写顺序：

显示属性

• display || visibility
• position
• top || right || bottom || left
• z-index
• clear
• float

自身属性

• width
• max-width || min-width
• height
• max-height || min-height
• overflow || clip
• margin : margin-top || margin-right || margin-bottom || margin-left
• padding : padding-top || padding-right || padding-bottom || padding-left
• outline
• border
• border-radius
• background : background-color || background-image || background-repeat || background-attachment || background-position
• box-shadow

文本属性

• color
• font : font-style || font-variant || font-weight || font-size || line-height || font-family
• font : caption | icon | menu | message-box | small-caption | status-bar
• text-overflow
• text-align
• text-indent
• text-shadow
• letter-spacing
• white-space
• vertical-align
• cursor