A New Way to Order CSS Rules

Here’s a new way to order your CSS rules: instead of ordering CSS rules alphabetically, try ordering them contextually. By ordering this way you save yourself the hassle of going through your alphabetical list, humping from W for width to H for height when they should be together.

  1. Sizing (width, height)
  2. Positioning (position, z-index, float)
  3. Padding and Margins (padding, margin)
  4. Typography (font, line-height, text-decoration)
  5. Color, Background, Opacity (color, background, opacity)
  6. Borders (border)
  7. Content Specific Settings (list-style)
  8. Usability Hacks* (text-indent)
  9. Miscellaneous

 

Bookmark this page for easy reference. Let me know how it works out for you!