在編寫 CSS 時，書寫的代碼順序經常會被忽視，但實際上它會對代碼的可讀性和維護性產生很大的影響。下面我們來看一下如何正確地書寫 CSS 的順序。

/* 建議的 CSS 書寫順序 */
/* 位置屬性 */
position
z-index
top/right/bottom/left
/* 盒模型 */
display
float
width
height
margin
padding
border
/* 文字系列 */
font-family
font-size
font-weight
font-style
line-height
color
/* 其他 */
background
border-radius
text-align
vertical-align
cursor
overflow

首先是位置屬性的設定，如 position、 z-index、top/right/bottom/left，這些屬性決定了元素在頁面中的位置，必須先設置。若先設置了盒模型的屬性，再設置位置屬性，可能會覆蓋盒模型屬性的設定，影響頁面樣式。

接下來的是盒模型，包括了 display、float、width、height、margin、padding、border 。這些屬性能夠影響元素在頁面中的布局和大小，因此其次設置。

然后是文字相關的屬性，包括 font-family、font-size、font-weight、font-style、line-height 以及color。與文字相關的屬性必須按照特定的順序設置，才能保證頁面樣式的正確性。

最后是一些其他的屬性，包括了background、border-radius、text-align、vertical-align、 cursor、 overflow。這些屬性與布局和樣式無關，但是也很重要。

按照這個順序書寫 CSS，可以保證樣式的風格統一，也嚴格遵守了各屬性之間的順序關系，以便于日后代碼的維護和修改。