How to organize CSS @ 9elements

Rationale

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:

1. From most important to less important. So what is important? Rules that affect the layout and the box size. What happens inside of the box and does not affect the layout/size is less important.
2. Group properties that belong together in terms of the CSS specification: Positioning, float/clear, font-*, text-*

3. 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-*.

4. Order by box model, start at the outer edge and move inward
5. Clockwise longhand order: *-top, *-right, *-bottom, *-left

Sources

• Concentric CSS
• How do you order your CSS properties?
• Principles of writing consistent, idiomatic CSS
• Sass Guidelines
• Download this document as PDF