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:

#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:

• Indentation 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.

#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.