CSS writing order improves readability

property writing order

[Recommendation] When writing properties under the same rule set, they should be grouped by function and written in the order of Formatting Model (layout method, position) > Box Model (size) > Typographic (text related) > Visual (visual effect) , to improve the readability of the code.

explain:

• Formatting Model related properties include: position /  top /  right /  bottom /  left /  float /  display /  overflow etc
• Box Model related properties include: border /  margin /  padding /  width /  height etc
•  Typographic  related properties include  :  font //   etc.line-heighttext-alignword-wrap
•  Visual related properties include  :  background //   etc. colortransitionlist-style

Also, if  content attributes are included, they should come first.

Example:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */ position: absolute; top: 50px; left: 0; overflow-x: hidden; /* box model: sizes / margins / paddings / borders / ... */ width: 200px; padding: 5px; border: 1px solid #ddd; /* typographic: font / aligns / text styles / ... */ font-size: 14px; line-height: 20px; /* visual: colors / shadows / gradients / ... */ background: #f5f5f5; color: #333; -webkit-transition: color 1s; -moz-transition: color 1s; transition: color 1s; }