Skip to main content

Restyle Your CSS Declarations With CSScomb

By Craig Buckler

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.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad