書寫順序有規律的話，不僅code能簡單一致，而且也能增進維護性，尤其和簡寫搭配之後能更清楚的條列出樣式在做什麼，當以後有需要修改樣式的時候，也不用看半天才找到你要改的樣式。我們的書寫順序是跟簡寫的順序做搭配，知道如何簡寫就知道書寫的順序，例如font和background的書寫順序就是簡寫的書寫順序。

書寫的順序是先以區塊的樣式為優先，再來處理box model、font等等，這就像在建一楝房子一樣，整個結構都先定好了，才開始決定裡面的擺設、裝潢等等。以下列出所有css樣式的順序：

• 定位樣式 (Position)
  display
  visibility
  position
  top
  right
  bottom
  left
  z-index
  float
  clear
  clip
  overflow
  overflow-x
  overflow-y

• 清單樣式 (Lists)
  list-style
  list-style-type
  list-style-image
  list-style-position

• 表格樣式 (Tables)
  table-layout
  caption-side
  border-collapse
  border-spacing
  empty-cells

• 區塊樣式 (Box Layout)
  width
  max-width
  min-width
  height (若採單行垂直置中技巧時，會把line-height緊跟在height的下面)
  max-height
  min-height
  margin
  margin-top
  margin-right
  margin-bottom
  margin-left
  padding
  padding-top
  padding-right
  padding-bottom
  padding-left
  border
  border-width
  border-style
  border-color
  border-top
  border-top-width
  border-top-style
  border-top-color
  border-right
  border-right-width
  border-right-style
  border-right-color
  border-bottom
  border-bottom-width
  border-bottom-style
  border-bottom-color
  border-left
  border-left-width
  border-left-style
  border-left-color
  outline
  outline-width
  outline-style
  outline-color
  background
  background-color
  background-image
  background-repeat
  background-attachment
  background-position
  background-position-x
  background-position-y
   
• 文本樣式 (Font and Text)
  color
  font
  font-style
  font-variant
  font-weight
  font-size
  line-height (若採單行垂直置中技巧時，會把line-height緊跟在height的下面)
  font-family
  letter-spacing
  word-spacing
  text-align
  vertical-align
  text-justify
  text-align-last
  text-decoration
  text-indent
  text-transform
  text-shadow
  direction
  writing-mode
  unicode-bidi
  white-space
  word-break
  word-wrap
   
• 自訂內容 (Generated Content)
  content
  quotes
  counter-reset
  counter-increment
  
  
• 使用者介面 (User Interface)
  cursor
  scrollbar-arrow-color
  scrollbar-base-color
  scrollbar-face-color
  scrollbar-highlight-color
  scrollbar-3dlight-color
  scrollbar-darkshadow-color
  scrollbar-shadow-color
  scrollbar-track-color
  zoom
   
• 列印樣式 (Printing)
  page-break-before
  page-break-after
  page-break-inside
  windows
  orphans
   
• 特效樣式 (Special)
  behavior
  filter
  -moz-opacity
  opacity
  -moz-binding

    

 相關參考內容：

• 推薦的 CSS 撰寫順序
• [原]CSS書寫順序
• 傳說中的Mozilla推薦
• 5 Ways to Instantly Write Better CSS
• Order of the Day: CSS Properties
• How do you order your properties within a declaration block?
• CSS Reference
• CSS Compatibility and Internet Explorer