Authored by Primate

A rather awesome, informative
and witty blog about all things web

Get your styles in order

img{ color: rainbow; filter: blur(5px); }

ABCSS or property grouping? This wasn’t a question I’d asked myself before reading an article titled Ordering CSS for Everyone. I’ve been writing CSS for quite a long time, and during that time I’ve built up a preferences on how I like order and organise style properties. It had never occurred to me that there were named systems, but of course there are, it makes perfect sense.

If you currently don’t order style properties in your stylesheets, then I would recommend giving it a shot. There are two approaches you could take. You could either follow ABCSS, where each property is listed alphabetically, or you could order by property groups. So for example you would group all typography properties together, and you could list all positioning properties together.

Continue reading