About

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, multilines 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.

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

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

What can CSScomb do?

• Sorts CSS-properties within the selectors according to the settings.
• Treats the initial formatting of style sheets carefully.
• Sorts commented properties as if they are not commented.
• 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.
• Successfully parses @media ... {...} and any other constructions with @.
• 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 sorting?

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

How to support?

Make a plugin (if you don't have one) for your favorite code editor.

Plans

Improvement of the algorithm and rework the test cases that are failed.

Introduction of CSScomb in the popular code editors.

Gratitude

Александру Титула-Бойченко, Вадиму Макееву, Игорю Майданову, Олегу Васютинскому, Елизавете Пимошиной, Алёне Царевой and everyone who helped in testing.