Chris Coyier of CSS-Tricks shows the different logical ways to group CSS properties

I came across this poll on CSS Tricks (which references Nicholas Gallagher's Idiomatic CSS)when I was just starting out as a junior front-end dev. It was a pain to force myself to stick to the pattern at first, but 3 years on and it's completely automatic.

The benefits really start to show when you are collaborating with others – initially, my coworkers at my previous job balked at the idea of putting thought into ordering CSS properties, and it was frustrating for me to put the effort in and not have it reciprocated by others. The thing is I don't believe it should ever be a hard rule (at least for smaller teams), so I just kept at it and let it speak for itself. Soon enough, my coworkers were grouping things together on their own, and thanking me every time they had to work on my SASS files. While their grouping wasn't always perfect, the process of making changes is infinitely easier as long as there is some logical grouping of properties.

Thinking about it now, it was really beneficial in helping me better understand CSS and how different properties work and affect other elements. It's also just really good practice to prioritise structural properties (like positioning and display), as those form the foundation of a site's layout.

/r/webdev Thread Parent Link - mediatemple.net