How to organize CSS @ 9elements

Sass Inheritance

Generated Content

content

Position and Layout

Display and Visibility

Clipping

Animation

Box Model (from outside in)

Background

Typography

Pseudo-classes & pseudo-elements (nested rules)

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:

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.

Group properties that belong together in terms of the CSS specification: Positioning, 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-* .

Order by box model, start at the outer edge and move inward

Clockwise longhand order: *-top , *-right , *-bottom , *-left