CSScomb: sorting CSS properties with basic preprocessor support and gingerbread

Just yesterday, my text about CSScomb was published on Smashing Magazine . Since I wrote it in Russian and then translated it into English, I decided to publish the original version on Habré.

At the time of this writing, browsers support about 200 CSS properties. Almost all of them you use in your projects. It's time to think about the consistency of not only the formatting of the code, but also the order of the properties within each selector. If you follow your code style, then this article is for you. I present to your attention a simple way to automatically sort the properties in the CSS code of your projects.


')
CSScomb is a utility for sorting CSS properties within each selector in a given order. The CSScomb algorithm maximally repeats the actions of a web technologist when working with CSS code. To re-sort, you usually need to move the lines relative to each other, taking into account comments in the code, multi-line entries of property values, hacks, and everything that can occur in the file of any serious project. This is pretty boring. But CSScomb will do it for you without any problems.

The CSScomb algorithm, by its nature, “thinks” like a human editing text, and not like a blind robot that parses CSS by bone. This allows the utility to remain simple.

And now some details for those bores and perfectionists, to whom this is to their liking.

Why do you need CSScomb?

I worked in several teams where there was a different code style. This concerned not only the principles of naming, line length, spaces, tabs and indents, but also the order in which CSS properties were written. To follow the order manually was not too comfortable. In addition, sometimes we had to work with the old code or someone else's code that does not correspond to our code style. And I decided to make the most simple utility that performs only one function - sorting properties within each selector .

CSScomb is very convenient and helps in professional work. Here are some reasons why I recommend you use this tool to sort CSS.

1. CSScomb supports code style. This is important in long-term projects, where the code is constantly governed, rewritten, replaced. Uniformity and independence from the participants of the process can put you in conditions when you have to watch out for each symbol. In such a situation, CSScomb will help unload your attention and provide an opportunity to concentrate on more important things.
2. CSScomb simplifies code understanding. Code written by me, my colleagues, third-party programmers will be predictably sorted, and, therefore, easy to understand.
3. CSScomb speeds up access to desired properties. You can quickly find the desired part of the code and spend less effort on it, looking at the right part of the list of declarations.
4. CSScomb prevents stupid mistakes. Overriding properties that are in different parts of the declaration list will now be unlikely, because the same properties will be sorted. Mutually exclusive properties will now also be in full view.

How to sort?

Another reason for creating CSScomb is that none of the utilities I know how to sort properties well. There were online beautifyers, a sorting function. But, firstly, it was a secondary function, secondly, implemented carelessly. The impression was that these utilities were written by programmers to demonstrate to other programmers their ability to write at least something.

Especially striking settings. For example, it is obvious that sorting all the properties of length is not serious. When you try to apply these sorts to real files, you will immediately see all the disadvantages. For example: top , right , bottom and left will be torn apart from each other. Not to mention that with alphabetic orders all properties with a prefix will be dumped in a heap.



Sorting properties alphabetically causes a single smile. It is a pity that the enthusiasts who apply it do not understand the difference between a group for the sake of a group and a group according to a functional attribute. Sorting alphabetically by selectors is beyond good and evil.

The only correct way to sort the properties is to do it according to the functional principle. This order is included in CSScomb by default. All properties are divided into several groups and lined up in the most logical order within the group.



Initially, I took the sort order from a Zen Coding project that you know for sure. But at the moment the list of properties-keys in CSScomb is a little wider. This is due to the nuances of real CSS. More information about the default sorting list can be viewed in the project repository on Github.

If necessary, I have provided two additional features:

1. The ability to change the sort order if you already use another.
2. Break property groups with an empty string.

To adjust the sorting order of CSS properties, use a one-dimensional JSON array with the listed properties. Changing the sort order is as easy as swapping around 200 of its elements. I hope you are not motivated enough to do this, so I prepared the most rational option by default.

It is still possible to break properties into groups. Like this:

 #free .pussy-riot { 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; } 

For this, a one-dimensional array with the order of the properties must be made two-dimensional. Like that:

 [ [ "position", ... ], [ "margin", "padding", "border", ... ], ... ] 

What can CSScomb do?

Although I personally adhere to the “one line - one property” rule, the comb is absolutely omnivorous in oneline / multiline and code formatting. Its task is simply to change the order of properties.

All the same properties will be re-sorted one after the other in the order in which they met within the same selector.

All unknown properties (those that are absent in the sort order) will be transferred to the end of the list, in the order in which they met within the same selector.

Separately, I paid attention to the features of real CSS-code. Comb perfectly copes:

• with sorting properties with multi-line value
• c hacks (you don't abuse them, right?)
• with property overrides, sometimes unintentional and sometimes deliberately written to support degradation
• with the absence of the last semicolon before }
• with expression for IE
• with datauri , HTML entities , @rules and other CSS lexical constructs
• and all that can be found in a complex project.

The comb not only does not remove the commented properties, but also sorts them as if they were not commented out (comments are saved). And at the same time it distinguishes the declaration from the text in the comments.

Here is an example with a few commented out declarations before sorting:

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

And here it is after processing CSScomb:

 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 divided, and they have taken their places according to the sorting order.

I will not hide - work with comments was difficult for me, and this is perhaps the most difficult and unpredictable place in your code. Speaking of cleanliness, I rely on your understanding - if at the entrance there will be a three-story cosmically complicated page with comments, then please be lenient with the result of sorting.

And another hot topic. All diligent designers and technologists know the principle of sorting properties with prefixes. In the CSScomb sort order, the default is the order corresponding to the inverted pyramid principle : prefixes from long to short, and then the property without a prefix.

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

And the last nice bonus: you can feed CSScomb a single property list, the entire CSS file, and even the style tag with CSS declarations. All this is especially useful when selecting a part of the file that you are currently working on in your favorite code editor. Oh yeah, the editors ...

Real product and plans

Now CSScomb is not only an online demo and version for the command line, but also a whole set of plugins for various editors:

• Sublime Text 2 (in Package Control)
• Textmate
• Coda
• Coda 2
• Espresso 2
• IntelliJ IDEA
• Webstorm
• PyCharm
• Notepad ++
• Vim

The entire planning and development process is transparent and available on the project page on Github. At the time of this writing, CSScomb 2.11 has been released in basic support for LESS and SASS and the next version is already planned. For updates and news, you can follow the project twitter .

If you can help make a plugin for an editor that is not yet listed (for example, Eclipse, Aptana Studio, UltraEdit, Komodo Edit, CSSEdit, Emacs, TopStyle), please contact me.

All the necessary information including an online sorter and detailed test groups with a description is on the site of the project CSScomb.ru .

I hope, CSScomb will help to make the quality of your code a little better, the number of errors due to oversight is less, and you are happier.