Tame Your Wild CSS with CSScomb

For the longest time, I've been sorting the properties of all my CSS rules alphabetically, mostly for the lack of a better solution. It seemed like a reasonable thing to apply an alphabetical sort order because the order of property assignments itself doesn't matter to the browser (aside from vendor-prefixed properties, of course).

Here's how a typical CSS rule with alphabetically sorted properties would look like:

.button {
    background: linear-gradient(to bottom, #e85c33 0, #e53a2b 100%);
    border: 1px solid #e53a2b;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    padding: 10px 15px;
}

If you're curious what a button with the above style looks like, here you go:

Orange 'Submit' Button

Alphabetic Order: Advantages and Disadvantages

Sorting properties alphabetically has a couple of advantages:

  • It's easy to write properties in the right order.
  • Tools can automatically sort the properties.
  • You can quickly locate a property you're looking for.

So far, so good, but an alphabetic arrangement also has some disadvantages:

  • Properties which belong together, such as width and height, are usually scattered all over the selector declaration simply for the fact that their first letters differ.
  • Properties are not logically grouped by functionality, but by name (which feels like sorting books in a library by size rather than topic).
  • Important layout properties like box-sizing, display, or position, which have a huge impact on how an element is rendered, are interspersed with more "cosmetic" ones like background, color, or font-style.

All in all, sorting properties alphabetically isn't ideal for organizing CSS rules. How about grouping them by functionality instead? This is where CSScomb comes into play.

Sorting Properties with CSScomb

Wouldn't it be much nicer to have the layout properties with a bigger impact at the top of a CSS rule, followed by the remaining ones?

.button
{
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #e53a2b;
    border-radius: 3px;
    background: linear-gradient(to bottom, #e85c33 0, #e53a2b 100%);
    color: white;
    font-size: 1em;
    cursor: pointer;
}

That's what CSScomb can do for you automatically. It's a little open-source Node tool which knows about how to prioritize and sort CSS properties. If you're curious about the exact order of all known CSS properties I prefer, here's the complete list.

And the best thing is: CSScomb also works for CSS preprocessors like Sass and Less.

CSScomb is pretty smart about what it does: It understands vendor prefixes and browser hacks, and it can also deal with commented-out properties. If it doesn't know about certain properties, those will be listed below the known properties while maintaining the order they were written in. Check out CSScomb's configuration options for further details.

Automatically Formatting Stylesheets

On top of sorting your CSS properties, CSScomb can also take care of beautifying your stylesheets. You can configure dozens of formatting options, including:

  • Indendation mode (spaces vs. tabs)
  • Indentation depth (2 spaces, 4 spaces)
  • Brace style (same line vs. next line)
  • Number and unit formats (0 vs 0px)
  • Single or double quotes (' vs. ")
  • Spaces and line breaks (applies to rules and selectors)
  • Alignment of vendor-prefixed properties (left vs. right)
  • Semicolon insertion (color: red vs. color: red;)
  • Stripping blank rules (such as .something { })
  • Unifying casing of hex colors (#ff00aa vs. #FF00AA)

All of those options are fully configurable. On the CSScomb website, there's a Build config section which lets you put together your configuration of choice in a wizard. You can pick your favorite from several styles:

Wizard to create a formatting configuration for CSScomb

Very polished and well done!

Summary

Rather than sorting properties in CSS rules by name, we should group them by functionality. Properties with the most impact on the layout should come before all others. Also, the formatting should be same across all stylesheets to keep all CSS rules consistent — a perfect use case for an automated tool like CSScomb.

Even if you don't want to use CSScomb for some reason, sorting your CSS properties by functionality (rather than by name) is a good idea. I've done it manually for the longest time, and after a while the sort order will come naturally to you.

As with all source code, more time is spent reading stylesheets than writing them, and that's what we should optimize for with clear sorting and formatting rules.

Use the coupon code LAUNCHDAY for $10 off!

Learn React

3 Comments

Tobias Höft

Very nice Post!

I wonder why i didn't saw it before :-)!

Thx for your introducing!

Best regards!

Peter

Hey,

have you tried using csscomb with scss files? Would you run csscomb against your scss files or the complied css files?

Thanks Pete

Erik van de Ven

Hey Peter,

I've used the csscomb Sublime plugin and used it for SCSS files without any issues so far. The one thing I'm missing is the possibility to add a newline right before a subclass, but as far as I know they are working on it: https://github.com/csscomb/csscomb.js/pull/405

But you need to make sure you have selected the right syntax (in the bottom right of your Sublime window), which is SCSS, else you will get an error when hitting CTRL+ SHIFT + C. But this only counts for Sublime of course ;)

Best Regards!