Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Free Tool CSScomb: Sorting CSS Properties, The Better Way

This is our seventh article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide4 with us, and later we’ve announced Erskine’s responsive grid generator Gridpak5 and JS Bin6. This time we present CSScomb, a tool to help you sort and categorize CSS properties in your code to improve maintenance.

As of this writing, Web browsers support about 200 different CSS properties. In all probability, you use pretty much every single one of them in your projects. So it’s about time to think of the consistency of the ordering of CSS properties inside selector declarations as seriously as you’d think about consistency in the formatting of code. So, if you want to pay attention to your code’s style, this article is for you. There’s a simple way to automatically sort CSS properties in your projects.

CSScomb7 is a utility to sort CSS properties within each selector declaration in a predefined order. The CSScomb algorithm is intended to be as close as possible to the choices a Web developer would make when working on CSS code. In order to re-sort, it is would usually be necessary to cut and paste lines, taking into consideration comments, multiline values, hacks — everything you would encounter in any serious project. This task is fairly dull to do by hand: you can trust CSScomb to do it for you.


The CSScomb algorithm is designed to “think” as a human editor, not as a dumb robot parsing CSS. This keeps the utility simple.

Here’s an example of how disarranged code can be fixed by CSScomb:

Comb your code
On the left, unsorted code. On the right, code after using CSScomb.

So, some details for the geeks and perfectionists who love tech small talk…

Why Do You Need CSScomb? Link

I’ve worked on several teams, and each had a different CSS coding style. The naming system for CSS classes, line lengths, spaces, tabs and indents, and the order of CSS properties within selectors — everything was different. Maintaining the correct order by hand was tiresome. In addition, sometimes I had to work with legacy or third-party code that did not comply with our coding style. That was when I decided to create a very simple utility that would do just one thing but do it well: sort the properties inside each selector.

CSScomb has turned into a great utility that can really help with your professional work. Here are some reasons to use this little tool for CSS sorting:

  1. CSScomb helps maintain your coding style.
    This is very important for long-term projects, in which code is constantly edited, rewritten or replaced. To maintain uniformity and make code independent of any one programmer’s style, you would have to watch over every character typed. In such situations, CSScomb would relieve the burden and free you to concentrate on more important things.
  2. CSScomb helps you understand code.
    Code written by you, your colleagues or other programmers would be predictably sorted and, therefore, easier to understand.
  3. CSScomb helps you find CSS properties faster.
    You would know exactly where a CSS property is, and looking through the list of declarations would require less effort.
  4. CSScomb prevents accidental errors.
    Overriding properties in a CSS selector would be unlikely because identical properties would be sorted. Mutually exclusive properties would also be highly visible.

How Exactly Should CSS Properties Be Sorted? Link

I created CSScomb for another reason: no utility known to me could sort CSS properties well. Some online CSS beautifiers had a sorting option. But it was just an option and, more importantly, no real attention was paid to design. These utilities seemed to have been written by programmers driven to demonstrate their abilities to other programmers.

Especially astounding were the settings. Sorting CSS properties by length is obviously absurd. If you tried applying this kind of sorting to a real file, you would immediately see the disadvantages. For example, top, right, bottom and left would be scattered all over the selector declaration. It goes without saying that alphabetical arrangement would ensure that all prefixed properties would be grouped together.

Sorting CSS properties by alphabet just makes me smile. It’s a pity that advocates of it do not understand the difference between functional grouping and grouping for the sake of grouping. Sorting CSS selectors alphabetically is beyond repair.

The only way to sort CSS properties usefully is to arrange them functionally. This is the sort order included in CSScomb by default. All properties are divided into several groups and arranged in the most logical order within each group.

When I started developing CSScomb, I took the default sort order from the Zen Coding9 project (perhaps you know of it). But the list of properties in CSScomb has become a bit bigger to account for the nuances of real-world CSS. You can read more about the default sort-order declaration on the CSScomb page on GitHub10.

If using another sort order is necessary, there are two additional features:

  • You can change the sort order (because, say, you are already using another order in your project);
  • You can separate groups of properties by line breaks.

CSScomb sorts the properties in your CSS by using a JSON array with the names of all properties in order. Changing the sort order is possible, but you’d have to rearrange the 200 values in that JSON array. I hope you’re not motivated enough to do that. The default sorting algorithm seems to be the most rational one to me.

You can also split properties in groups, like this:

#box {
  position: absolute;

  margin: 1em 0;
  border: 20px solid black;

  background: green;
  box-shadow: 0 2px 10px #666;
  color: red;

  letter-spacing: 3px;
  font-size: 72px;

In order to do this, you would rewrite the array with the CSS properties as an array of arrays, like this:


What CSScomb Can Do? Link

Even if I personally like the “one line, one property” rule, CSScomb is completely agnostic about whether you use one-line or multiline syntax, or how your code is formatted at all. The utility’s purpose is just to reorder properties.

Duplicate properties will be sorted one after another in the same order they were in in the original selector declaration.

Unknown properties (i.e. those not specified in the sort order declaration) will be moved to the end of the list in the same order as they were in the original selector declaration.

I’ve paid particular attention to the peculiarities of real CSS code. CSScomb handles the following beautifully:

  • Sorting properties with multiline values;
  • CSS hacks (you use them responsibly, right?);
  • Overriding properties — sometimes accidental, sometimes intentional to support graceful degradation;
  • Missing semicolons before the closing brace (});
  • expression syntax for Internet Explorer;
  • datauri, HTML entities, @rules and other lexical constructs of CSS;
  • Pretty much anything you might encounter in a complicated project.

CSScomb does not delete properties that are commented in your code. Instead it sorts the comments as it would had they not been commented out (in other words, the comments remains as comments — don’t worry). In doing that, CSScomb knows the difference between declarations and comments.

Here’s an example of several commented declarations before sorting:

h1 {
  background: #faf0e6;
  /* border: 2px dashed #800000;
  color: #a0522d; */
  padding: 7px;

The same code after sorting with CSScomb would look like this:

h1 {
  padding: 7px;
  /* border: 2px dashed #800000; */
  background: #faf0e6;
  /* color: #a0522d; */

As you can see, the properties are still commented out, but now they are separated and take their place according to the sort-order declaration.

I’ll be honest with you: it was a real pain developing the engine to correctly handle the comments, and this is perhaps the most complicated and error-prone feature. So, to speak frankly, if the comments are a three-level-nested byzantine labyrinth, please be forgiving of the sorting result.

Another pressing issue. Every good Web developer knows the principle of sorting prefixed properties. In the sort-order declaration, CSScomb by default follows the principle of the inverted pyramid: prefixes are sorted from longest to shortest, followed by the unprefixed property.

-webkit-browser: cool;
-moz-browser: cool;
-ms-browser: cool;
-o-browser: cool;
browser: kewl;

Last but not least, you can feed CSScomb with a standalone property list, a whole CSS file or a <style> tag with CSS declarations. Being able to work with part of a file in your favorite code editor is extremely useful. And as for that…

Real Product, Real Plans Link

CSSсomb does not have a built-in CSS parsing engine. The tool uses regular expressions to work with code. That decision keeps the utility compact (about 1000 lines of code). The project is written in pure PHP, without any external libraries or dependencies. I plan to switch to JavaScript in a future version, and to add support for CSS preprocessors after that.

As of now, CSScomb is not just an online demo11 and a command-line utility, but also a great set of plug-ins for most popular editors:

  • Sublime Text 2 (can be installed via Package Control)
  • TextMate
  • Coda
  • Coda 2
  • Espresso 2
  • IntelliJ IDEA
  • WebStorm
  • PyCharm
  • Notepad++
  • Vim

Every stage in the process of planning and development is transparent and available on the project page on GitHub12. As of this writing, CSScomb is at version 2.11, and the next version is already planned. You can follow news and updates about the project on the Twitter stream13.

If you can help to develop a CSScomb plugin for an editor that’s not on the list above (such as for Eclipse, Aptana Studio, UltraEdit, Komodo Edit, CSSEdit, Emacs or TopStyle), please contact me or open an issue on GitHub.

Conclusion Link

I hope CSScomb helps you make your code a little better, reduces bugs and makes you a bit happier. Find everything about the project (including the online demo and tests) on the CSScomb website14.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14

↑ Back to top Tweet itShare on Facebook


I'm a front end web developer at leading search engine in Russia Yandex, author of CSScomb, active member of russian community and organizer of Web Standards Days conference.

  1. 1

    A, B, C, D…Oh! You don’t know the rest!?

    Guys like you make me smile too.

  2. 2

    “The only way to sort CSS properties usefully is to arrange them functionally.”

    Sorry I have to disagree.

    Sorting the declarations by anything other than alphabetical order you are creating a maintenance problems. If the properties are in alphabetical order you know exactly where they should be in each CSS selector.

    Any other sorting method that relies on grouping is prone to an individual’s interpretation of what they think is functionally related.

    • 3

      I think that having CSS properties functionally grouped makes much more sense to me. It does rely on the author’s interpretation, but they made it customizable for your needs.

      • 4

        This is fine in when you are working on a project as an individual, but when you work with several other developers working to coding standard is important and keeps code consistency. The only way to keep your declaration order consistent between different people is to mandate their CSS declarations must be in alphabetical order.

        I know it sounds overly anal, but it when working with more than 1 or 2 other people, adhering to a standard unambiguous coding standard throughout your project(s) will stop your code base looking like a mess.

        • 5

          I disagree. It’s not hard to maintain a convention that orders declarations by logical groups: Layout, borders, text formatting, etc.

          Your problem may be that you’re working with designers that either can’t be bothered to follow a convention or don’t understand the structural impact each rule has on the page.

          Organizing declarations can help speed up maintenance because you can focus on the group of rules that relate to the change you’re working on. Why would you want to scan over a bunch of font declarations while working on display/position rules?

          • 6

            My point is, how does one decide what is related?

            If it is fonts, do I include only those that declare the font or do I include things like text-decoration, text-align, vertical-align.

            If it is positioning, do I include margins and padding along with things such as display and position declarations? or should I group that with width and height?

            If you ask the chap next to me he is likely to have a different answer than me. I would probably have a different answer next week than I do now.

            If it is alphabetical order, there is no ambiguity. This is important when working in a team.

            Also I don’t wish to be trite, but it isn’t difficult to scan over an alphabetical list? The properties are always going to be in the same order.

          • 7


            I agree with all of your suggestions:
            Font/text formatting rules are functionally related to each other and the layout rules are related to each other.

            What I’m saying is that since you’re working in a team environment, actually ask the chap next to you. Decide on the best conventions, document it, reference it. Perhaps write a blog post about a tool to organize it and get published on Smashing Mag. :)

            Scanning a list of rules by function still seems a little more efficient than by beginning letter.

          • 8

            Sorry Jeff while I can’t reply to you last in this thread, I will instead reply to this.

            I do ask the chap next to me, however there are lot of other chaps that are more than 3000 kms away. Setting a strict standard has it advantages in when teams are have significant distance between them.

            As for getting linked for smashing magazine, I don’t think that is going to happen in this lifetime.

          • 9

            Nexii Malthus

            October 3, 2012 12:28 am

            Your all missing the point.

            With this tool, you don’t need to conform to anyones’ convention anymore, you can let the tool interpret it into your preferred format.

            The only consistency is our own, which is at it should be.
            It’s a very personal thing after all.

            Just like how we can easily automate tab reindents, code layout, etc. in our text editors.

        • 10

          Great tool!

          Also agree with Nexii Malthus. With a tool like this, there is no ambiguity about the order. Doesn’t matter how many people are on the team or where they are. Someone, whether by consensus or decree, decides the order and specifies it by creating the JSON array that has the desired sort order that the tool will use. Then it’s just a matter of running the tool (whether manually, or as part of an automated build/commit process.) Just like other programming style guides (tabs vs. spaces, level of indention, character set, etc.) and tools like EditorConfig:

          As for my preferences, functional grouping rules, alpha might as well be random. There’s no way having min-width and width (for example) separated by a bunch of other rules is an efficient pattern.

    • 11

      I agree. Though, for an individual, alpha make sense. For a team or for teams perhaps, I can surely see how functional grouping makes *great* sense. I’ve been researching “responsive design” and saw the example of the Boston Globe. Gee, whiz, that’s one heckuva style sheet! Huge collaboration involved. I can see how grouping by function would make *great* sense. But for me, in designing my small-time sites, alpha makes it much easier. I think, whatever makes it easier for the web designer should be the rule. So-called “standards of design” have their limits. Functional grouping, in a way, may be considered as “cosmetic” as alpha grouping.

    • 12

      Michael Dozark

      October 2, 2012 7:21 am

      I was thinking the same thing, Luke. I used to sort “functionally,” but I found very quickly that my method for functional sorting varied from the four other developers in the studio. Even if we could agree on which functional elements belonged together, we could not agree on which order the functional blocks belonged in.

      I suppose I agree with some level of functional sorting, in that I think good alphabetic sorting sorts by property and not by prefix (so that -moz-transition would appear next to -webkit-transition and transition rather than next to other -moz- properties), but otherwise alphabetic is the only non-subjective way to sort.

      • 13

        I totally agree with keeping the browser specific extensions together. We don’t tend to use them at our work (we are still using XHTML 1.0 and CSS 2.1 for compatibility, hopefully when we get a chance to refactor we can start moving forward again).

    • 14

      Ecaterina Moraru

      October 2, 2012 9:16 am

      I’ve resorted the properties to match alphabetical order
      Hope this helps.

      • 15

        Thanks for adding support for the alphabetical order option and thankyou for listening to the feedback.

    • 16

      I think there are some studies that prove this. When working with lists of items sorting them by anything other than alphabet is essentially equivalent to sorting them randomly (as far as reading speed and comprehension). For individual developers or very small teams organizing the code in this manner MIGHT provide some SMALL benefit over time as people learn the pattern, however, it also creates a learning curve for anyone new to the code and style. Primarily this feels like an aesthetic issue, beautifying the code to LOOK more professional. That in itself can have a benefit when you are trying to sell yourself to a client and want to give the appearance of being well organized and methodical, but I don’t see much benefit beyond that unless there’s a standard categorization for properties (i.e. which ones are layout versus typography versus color/imagery). Some people might put color with text properties and others might put line-height or white-space with layout. It would have been nice for the W3 to have defined CSS in that fashion; Layout vs. Typography vs. Imagery vs. Interaction.

  3. 17

    Hi, nice plugin but I can’t make it work in Sublime Text 2, ‘Sorter Error: attempt to sort non-existent file’ error given. Any help ?

  4. 22

    CSScomb is in my TOP10 Sublime Text plugins.

  5. 23

    Using this for a while now as a coda 2 plug-in. Absolutely love it, all webdevelopers like cleaned up code right? Press of a button! Thanks Slava, one of the simplest and most useful tools for every day CSS-ing.

  6. 25

    Going to try it in vim.

  7. 27

    Pankaj Parashar

    October 2, 2012 3:25 am

    Great! but would have been greater, if the app could also transform longhand css into shorthand format..

  8. 28

    in sublime a open up any css file, and get this error while executing the script

    “Sorter Error: attempt to sort non-existent file”

  9. 30

    Tunafish Salad

    October 2, 2012 3:59 am

    Looks great! Any chance of a version coming for Eclipse?

  10. 32

    It needs PHP to work, so it doesn’t really help as a plugin.

    • 33

      Slava Oliyanchuk

      October 2, 2012 4:17 am

      In OS X PHP available by default. In other OS you need to install it.

      Or you can keep on try sort properties manually :)

    • 34

      Roman Komarov

      October 2, 2012 4:36 am

      Slava wrote this in the article:

      > I plan to switch to JavaScript in a future version

      So, you could wait a bit for it. Or go and write your own implementation for the language of your choice.

  11. 35

    Demircan Celebi

    October 2, 2012 4:44 am

    So, people still write CSS? Cool work by the way, could be great with SASS support.

    • 36

      Yes I do, and nothing wrong with that – thats almost like saying “people still write JavaScript – would be cool with jQuery”!!!

    • 37

      Slava Oliyanchuk

      October 2, 2012 4:51 am

      It’s a big secret but for you… ;)

      • 38

        This is awesome. I agree with the Sass support (which does appear to be in testing, yay!), but I might use it to neaten up my stuff even without it…

        Hmm. Now to figure out how one would make a gedit plugin to this…

    • 39

      Yes, we do.

      Thus far, SASS addresses problems I don’t have. Perhaps one day I’ll encounter a project that needs it, but not yet.

      • 40

        Same here. I dont use pre-processors. Dont have any use for them yet. I work more efficiently, and fluently with just CSS.

      • 41

        I think the only thing I would use in it is the colour variables, as I do tend to use the same colour value quite a lot.

    • 42

      seems not work on SASS or SCSS or LESS.

      oh, I haven’t seem the reply below.
      I hope SCSS support will coming soon :-)

    • 43

      Demircan, I find the cynical arrogance of your comment to almost be depressing; good grief… Anyways, back to the topic at hand… I am quite pleased with the results of the little online demo of CSScomb. I had never heard of this tool before and it was kind of interesting to see that the author’s grouping technique was frighteningly almost identical to the way I’ve been organizing my CSS properties for several years. Thanks for the tool, Mr. Oliyanchuk – I will definitely be considering adding this tool to my daily workflow. It’s nice to see such a simple and practical tool that can stand out from the mountain of so-called “productivity” tools web developers are constantly being bombarded with.

    • 44

      Could you please tell us more about living in 2100? Here in 2012, we have to deal with a lot of CSS =) (Not that I’m complaining…)

  12. 45

    This made my day! Especially blew my mind with the Espresso 2 plugin. Thanks!

  13. 47

    I ran into this tool a couple of months ago. It is exactly what I was looking for. It makes so much sense to me to allow arbitrary ordering.

    After all, I know some people – for some weird reason – who prefer alphabetical ordering ;-)

  14. 48

    Have to agree with Luke on this. Alphabetical ordering is the easiest way of maintaining css amongst teams – you don’t have to think about it. Just glance down the list, you already know the alphabet (right?). You don’t know for sure how people order ‘functionally’.

    If arranging by functionality was easy, we wouldn’t need this tool (nothing against it, it’s cool in it’s own right). Even if you and your team can agree on what functionality is grouped with what, you still have to think about the ordering when you’re writing the code. Maybe not much but is it less than thinking about it alphabetically? I would imagine not.

  15. 49

    This tool sounds like it will give a good head start so you can keep your CSS in order later. Once you have ordering in place, it’s easy to just go forward and write it that way. With regard to alpha- vs. any other sort, I’m on the side of functionality grouping: fonts and type, then display and positioning, then bg and borders, then “special effects” like transitions and opacity. I think if any team can agree on any strategy, any consistent sorting will work… I just find alpha causes me to spend too much mental time singing the alphabet in my head, which makes me crazy, and it actually seems inefficient compared to functionality grouping if I’m attempting, for example, to change the look and feel without changing the layout, or vice versa.

    • 50

      From my previous comments, I’m obviously a fan of the logical grouping strategy. My preference is to order them by potential layout impact. This way, when I’m hunting down layout bugs, I often only need to scan the upper rules. Font settings often have little impact outside of their container.

      I also try to organize the selectors by logical groups: element selectors at the top (body, img, h1, etc.), with more specific declarations later. I also give some weight to the position in the document structure: (#header, #content, #footer).

      I wonder if selector sorting is a useful feature that would appear in this tool some day… :)

  16. 51


    October 2, 2012 11:11 am

    So… Is there any documentation on how to use this with Textmate (OSx)?

    I opened ~/‍Library/‍Application Support/‍TextMate/‍

    and didn’t find a “plugins” folder

    So I added one and moved all the stuff inside the Comb /plugins/ folder into that folder.

    Not sure how to proceed and there is limited documentation.

    Any one know what to do next?

    This isn’t much help…

  17. 54

    Gareth J M Saunders

    October 2, 2012 12:53 pm

    I can’t make it work in Sublime Text 2 either. I still get a “Sorter Error: attempt to sort non-existent file” error message when trying to run the plugin.

    I have XAMPP for Windows 1.8.1 installed, and have “Path” set in the environment variables (in system variables) pointing to J:XAMPPPHP. When I open CMD in Windows 7 and type php –version I see PHP 5.4.4 (cli) built: Jun 13 2012 21:27:06.

    What am I missing?

  18. 58

    This is the best thing in the world. I’ve searched for a tool like that but no luck. Most used to sort alphabetically, it sucked.

    Do you plan to use it on phpstorm editor?

  19. 64

    I would like to dive in this tool but I’m using (only a few projects per year) SimpLESS. I have not found indications if CSScomb could be merged with LESS tools and would appreciate a comment.

  20. 65

    As a bonus, keeping your CSS properties consistently ordered also significantly improves the efficiency of the GZIP algorithm — that’s the premise behind .


↑ Back to top