How do you order your CSS properties? Some developers prefer an alphabetical list. Some prefer grouping by related types. Ultimately, it doesn’t matter. There’s no ‘wrong’ way and you should use whatever style suits you. It will become a habit and you’ll be able to shave precious seconds when searching your own CSS code.
But what if you’re looking at one of your older stylesheets? What if you inherit someone else’s code? What if the file has been coded by developer who uses the force every time they declare a property? You’ll either lose a couple of hours re-ordering every declaration or several seconds every time you attempt to locate a property.
Enter CSScomb.
It’s a free tool which sorts all CSS properties in a stylesheet or inline HTML style attributes. You can set your own ordering preferences once and apply them consistently whenever necessary.
There’s a slick online version; simply paste in your code, hit Resort and the differences are shown which you can copy or edit.
Alternatively there are plug-in editions for popular text editors including Sublime, Textmate, Coda, Expresso, WebStorm, Notepad++ and Vim.
CSScomb is a great idea which is well-executed and incredibly useful when you want to transform my dumb ordering method into your own. Recommended.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
