Why order the declarations in a CSS rule at all? The goal is to understand the essence of the styles by reading few declarations. Most of the time, the essence is how the element is laid out and its size is determined. A proper ordering of rules allows to “scan” the declaration block for properties quickly.
General rules:
float
/clear
, font-*
, text-*
Order of CSS layouting as defined in the CSS specification:
position: absolute
may override float: left/right
.
float: left/right
may override display
, with the exception of
display: none
.
So the order is: position
, float
, display
.
Text is laid out in line boxes, then words, then glyphs.
So properties for font-size
and line-height come first,
then text-*
, then word-*
.
*-top
, *-right
, *-bottom
, *-left