Brandon Wang

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!

No expletives, inappropriate or off-topic comments.
Free speech is important, but your comments are subject to moderation.