Formatting vendor-prefixed CSS

I’m a sucker for CSS conventions. Beyond CSS property order, general code formatting, spacing, and commenting are all up for some discipline. To keep things nice and tidy, and to save time in the future, I do my best to streamline my code. Figuring out the right formatting for CSS properties, especially properties like border-radius and box-shadow, is near the top of my list.

Take for instance this block of CSS:

Straightforward enough. We have our vendor prefixes first, ordered by character length (a complex of mine I’m afraid), and ending with the official spec for that property. Great, but we can do better!

Ah, much better! Why? Well, if you’re a fan of code editors like Textmate, Coda, or Sublime Text 2, then you can easily edit multiple lines at a time. In Sublime Text 2—my editor of choice—I just have to hold Option while clicking and dragging to select multiple lines to edit.

With the values lined up, I can not only read my code faster and easier, but I can edit it faster and easier as well. A little bit of guidance on code formatting goes a long way for your own sanity, and those of your peers.