CSScomb: Tool for Sorting CSS Properties

There are hundreds of different CSS properties and a web application ends up using almost all of them. As and when you make changes to your UI or add plug-ins you are bound to make changes to your css file, which grows in size and later it becomes difficult to manage it. I am sure you all must have gone though this pain. If yes, then you must take a look at CSScomb – it is a great tool for sorting CSS properties in specific order.

CSScomb helps you in automatically sorting css properties within each declaration in a defined order which you are comfortable with. To sort your css, you first have to define the sort order of the css properties. CSScomb will display the list all possible css properties and you can move then up or down o define your own sort order. Once that is done you can just copy paste the contents of you css file and hit RESORT button. All properties within each declaration will be sorted based on the sort order which you have provided. You can change this sort order as and when needed and resort your css based on the new order. You can just copy-paste the result back in your css and you have the css file which is easier to understand and maintain.

How does CSScomb work?

The algorithm of CSScomb simulates web-technologist’s actions upon working with CSS-code to the limit. Usually to re-order code you move lines over each other considering comments in the code, multiline records of property values, hacks and everything that could be found in the real file. CSScomb reproduces these actions for you. This means that the parser “thinks” as a person editing the text, not as a blind robot parsing CSS.

What can CSScomb do?

1. Sorting css properties within the selectors according to the settings.
2. Treats the initial formatting of style sheets carefully.
3. Sorts commented properties as if they are not commented.
4. Moves down unknown properties in the order they are met within the selector. E.g.: he\ight: 100% and similar will be taken as the unknown ones.
5. Successfully parses @media … {…} and any other constructions with @.
6. Successfully parses expressions and then moves them to the end of the properties in the order they are met within the framework of properties of one selector.

How to adjust the order of css?

In the web interface, settings can be defined by a simple list: a line for each property, in the required order. If desired, it’s possible to divide properties into groups by adding an empty line. In that case the result of formatting will be the same.

For adjusting plugins use one-dimensional and two-dimensional JSON arrays. In case of two-dimensional arrays the properties will be divided into groups with an empty line. In plugins you should pick open file csscomb.php

• In TextMate: /Applications/TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Support/lib/csscomb.php
• In Coda: /Users/%YOUR_USER_NAME%/Library/Application Support/Coda/Plug-ins/CSScomb.codaplugin/Contents/Resources/csscomb.php
• In Sublime Text 2: /Users/%YOUR_USER_NAME%/Library/Application Support/Sublime Text 2/Packages/CSScomb/csscomb/libs/csscomb.php

Features of CSScomb

Some of the important features of CSScomb are:

1. Setting the order of CSS properties – Use the order to which you are accustomed to
2. Sorting CSS properties – The order of properties in the help of professionals
3. Parsing CSS in the tags <style>, style=”…” attribute – CSScomb find a CSS-code to other languages ​​and will sort it
4. Formatting style sheets does not change – Work as a singleline and multiline CSS
5. Separation of CSS properties for the group – Separate groups of empty string if you want
6. Full support CSS2/CSS2.1/CSS3 and even CSS4 – CSScomb ready for the advanced CSS-code

CSScomb online tool (for sorting css properties)

You can use CSScomb online tool to sort your css file.

1. Goto: http://csscomb.com/online/
2. Click on “Settings” link, “Sort order settings” window will slide out.
   
3. Define your css order and click on save button.
4. Click on Hide or Esc button to close the Settings window.
5. Copy-paste your css content to be sorted in the Edit teatarea.
6. Click “RESORT” button. You will see your code and sorted code next to each other.
   
7. Just copy-paste your codes into the css file.

CSScomb plugins:

CSScomb is not just an online utility but you can download it as a plug-in for your code editor.

• CSScomb for Eclipse
• CSScomb for Sublime Text 2 (Also in Package Control)
• CSScomb for Textmate
• CSScomb for Coda 2
• CSScomb for Coda
• CSScomb for Espresso 2
• CSScomb for IntelliJIDEA/WebStorm/PyCharm
• CSScomb for Notepad++
• CSScomb for Vim
• CSScomb for Chocolat

We have found it very helpful in maintaining our code and reducing bugs in our css files. Let us know your thoughts on this.