Free ToolCSScomb: Sorting CSS Properties, The Better Way

Advertisement

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.

CSScomb8

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?

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?

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:

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

What CSScomb Can Do?

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

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

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.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
  2. 2 http://www.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/
  3. 3 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  4. 4 http://www.smashingmagazine.com/2012/01/03/guideguide-free-plugin-for-dealing-with-grids-in-photoshop/
  5. 5 http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/
  6. 6 www.smashingmagazine.com/2012/07/23/js-bin-built-for-sharing-education-and-real-time/
  7. 7 http://csscomb.com
  8. 8 http://CSScomb.com/
  9. 9 http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
  10. 10 https://github.com/miripiruni/CSScomb/wiki/Sort-Order-CSS-Properties-(CSScomb-v2.11)
  11. 11 http://CSScomb.com/online/
  12. 12 https://github.com/miripiruni/CSScomb/
  13. 13 http://twitter.com/CSScomb
  14. 14 http://CSScomb.com

↑ Back to topShare on Twitter

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

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    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 ?

  2. 6

    CSScomb is in my TOP10 Sublime Text plugins.

  3. 7

    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.

  4. 9

    Going to try it in vim.

  5. 11

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

  6. 12

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

    Guys like you make me smile too.

  7. 13

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

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

  8. 15

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

  9. 17

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

    • 18

      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 :)

    • 19

      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.

  10. 20

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

    • 21

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

    • 22

      Slava Oliyanchuk

      October 2, 2012 4:51 am

      It’s a big secret but for you… http://csscomb.com/tests/#sass ;)

      • 23

        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…

    • 24

      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.

      • 25

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

      • 26

        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.

    • 27

      indeed.
      seems not work on SASS or SCSS or LESS.

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

    • 28

      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.

    • 29

      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…)

  11. 30

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

  12. 32

    “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.

    • 33

      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.

      • 34

        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.

        • 35

          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?

          • 36

            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.

          • 37

            @Luke,

            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.

          • 38

            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.

          • 39

            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.

        • 40

          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:

          http://editorconfig.org/

          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.

    • 41

      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.

    • 42

      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.

      • 43

        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).

    • 44

      Ecaterina Moraru

      October 2, 2012 9:16 am

      I’ve resorted the properties to match alphabetical order https://gist.github.com/3821280
      Hope this helps.

    • 46

      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.

  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

    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…
    http://wiki.macromates.com/Main/Plugins

  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 http://github.com/barryvan/CSSMin/ .

  21. 67

    Since so many people shared their preferred sorting (read: alphabetical), I thought I’d share mine too:

    – Positioning (position, float, clear, top, etc)
    – Size (width, height, padding, margin)

    – Box styling (background-color, border, border-radius, etc)
    – Text styling (font-size, text-indent, font-family, text-transform etc.)

    Those are the “blocks” I prefer using on bigger projects. This mainly helps when you’re coding something in several passes. Eg: grid first, then styling afterwards.

    Alphabetical, though relatively easy to grasp, seems to put related variables too far apart for my liking.

  22. 68

    Nice Good article………..

  23. 69

    I used to write my CSS by whatever value came to my head first. Now I stick strictly to alphabetical. I look at my old code and try to find a property and cannot. Functionality sorting seems just as bad as random to me. Alphabet is the way forward, and all my CSS is written as such.

    Everyone has their own personal preference, but imagine walking into the local Video Store to buy a Blu-Ray, but it’s not sorted Alphabetical, but by however the store clerk feels they should be grouped. Maybe by actor, maybe by release year. That would be annoying.

    • 70

      Yes, it would be very annoying if the store clerk was the one setting the order but…

      If you go into the library and you want to find The Adventures of Huckleberry Finn, do you really look around for the “A” (or “T”) sign? Don’t you start by going to Fiction (by whichever system that particular library uses – there’s a few), and then you go to the letter T, as it’s written by Mark Twain?

      Heck, your video store example is a bit flawed as well – where I’m from, the films would be sorted by genre before alphabetical, so it wouldn’t help me to just look for the letter G when I want Golden Eye, but rather (most likely) Action, and then G.

      My point on this is that the order should not be arbitrary, but to claim that any order except alphabetical is arbitrary is, well… arbitrary =) Find an order that works for you, use this tool (or don’t…), and that is really all there is…

  24. 71

    Hi!

    Looks like very promising and useful tool I’ve always wanted to have at hand. I always code CSS in alphabetically order, I have my reasons and I think that it is not the topic of discussion.

    My question is: how to set CSScomb to order my CSS alphabetically? Thanx!

  25. 73

    Mark Anthony Degamo

    October 3, 2012 4:04 am

    Wow, I would definitely give it a try… I hate sorting CSS properties alphabetically, it just doesn’t make any sense at all.

  26. 74

    Спасибо Слава

  27. 75

    I like it, i would just add some css beutifier/pretifier to it, so i do not need to run both

  28. 76

    The Sublime Text 2 Plugin doesnt work for me (Sorter Error: attempt to sort non-existent file)

    Thats what i get with php –version

    C:Usersitrulia>php –version
    PHP 5.4.4 (cli) (built: Jun 13 2012 21:27:06)
    Copyright (c) 1997-2012 The PHP Group
    Zend Engine v2.4.0, Copyright (c) 1998-2012 Zend Technologies

  29. 78

    I think I’ve found a little but important bug.
    I have used the online version of the CSSComb and when it gets to the comments part of the file it deletes a part of the comment if a “;” exists in there.

    Example:
    (before)
    /*
    LAYOUT: Full width, no sidebar
    DESCRIPTION: Full width content with no sidebar; used for attachment pages
    */

    (after)
    /* LAYOUT: Full width, no sidebar
    DESCRIPTION: Full width content with no sidebar; */

  30. 80

    Hi
    If you enter the below CSS into your online sorting tool at, http://csscomb.com/online/, the result looks somehow questionable , or am I missing something ?

    It looks like the comment /* DISTURBES SORTING */ is causing this. If you say
    /** DISTURBES SORTING **/ all is fine !

    Regards
    Heinz

    ********************************************/
    /*********for tables within forms ***********/
    /********************************************/
    .formgrid { /* DISTURBES SORTING */
    border-radius: 5px;
    margin-left:1em;
    box-shadow: 6px 6px 6px #aaaaaa;
    border:1px solid black;
    background:#dddddd;
    text-align:left;
    }
    .formgrid tr:hover{
    background-color:yellow;
    }

    .outerformgrid fieldset{
    border:0;
    }
    .outerformgrid legend{
    border: 1px solid black;
    font-weight:bold;
    text-align:right;
    border-radius: 4px;
    }
    /********************************************************/
    /*********wrapper around navcell content tcell***********/
    /******************************************************S**/

    .wrapper{
    float: left;

    }

    /********************************************/
    /*********left navigation cell ***********/
    /********************************************/
    .navcell{
    text-align:left;
    box-shadow: -6px -6px 6px #aaaaaa;
    border:1px solid black;
    margin:0;
    margin-left:16px;;
    margin-top:10px;
    padding-top:8px;
    padding-left:12px;
    padding-bottom:8px;
    padding-right:12px;
    border-radius: 5px;
    float:left;
    width:240px;

    }
    /********************************************/
    /********* content cell ***********/
    /********************************************/
    .outercontentcell{
    margin:0;
    padding:0;
    border:0;
    margin-left:300px;
    width:100%;

    }

  31. 82

    Bark Golgafrincham

    October 4, 2012 11:32 am

    Very interesting tool… Sounds like something that should be added to the Responsive Web Design toolbelt… People tend to think think RWD is a simple solution to the multi-screen problem. Responsive Web Design is not just about widgets. RWD is about methodology, code management, and good design — not just media queries. The RWD you read about is reality only for brochure and news sites, not for web applications.
    See here for more:
    http://wp.me/p2brND-8C

  32. 83

    I have installed the plugin in the Coda 2 plugin folder. When I open Coda 2, nothing is displayed under the Plug-ins menu. I can’t exactly figure out how to get CSSComb working. Can anyone help? I’m obviously on OS X, so I already have PHP by default. It’s just not coming across as an easy install like most other plugins.

    Thanks in advance,
    Ryan

  33. 88

    I use Sass(Scss) with Compass mixins. Will CSSComb useful for me? Will it work well with @mixins, @each, @extend?

  34. 90

    A very cool tool. But I can’t figure out how to use a custom sort instead of the default. If I wanted to sort according to your yandex alternative, what would I need to change? I’m using Notepad++ 6.1.2. Thanks.

  35. 92

    Great Script! Thanks for sharing.

  36. 93

    How can i make csscomb sublime plugin split properties in groups?

    thanks, for me csscomb is one of my must in sublime text

  37. 94

    The timing of these Smashing posts are sometimes uncanny. How could you have possibly known I was thinking of CSS management? Ever since I started using Less.js my CSS started getting sloppy. It’s time to get back to basics and clean things up. I believe this post will help set me back on the right path. Can’t wait to try it out in SublimeText2.

  38. 95

    Seriously, this is some pretentious **** right here. You smile? Really? Do you also let out a little self-satisfied chuckle?

    Here’s a little note about tone – “hey guys, I’ve been using this method and it’s very helpful … here’s why” VS “so, I’m really really awesome – other folks, not so much … but ME well let me tell about how I wrote this beautiful (and I do mean BEAUTIFUL by the way) tool so all the idiots out there can write magical, fluffly, magnificent css.”

    It’s sorting bro. Sorting. Big woop. Glad your method works for ya – but this isn’t brain surgery. It’s freaking html / css.

  39. 96

    Instead of making this only program specific, why not also create a browser add-on that does this within the debugger. My workflow consists heavily on browser debuggers such as Firefox’s Firebug, and I routinely copy my styles from them.

    • 97

      Currently I’m working on CSScomb.js which can be run on node.js or in every browser.

      • 98

        Hi Slava,

        That is great news. Have pushed the module to npm yet?
        If you need any help please let me know.

        Cheers

        • 99

          Hi Rodolfo,

          CSScomb depend on PHP. That’s why am not published it in npm. CSScomb.js will be in npm definitely.

  40. 100

    Up until today I never even thought too much about sorting css properties. Now I’ve read this article and the comments, I’m off to the pub, my css is probably a mess to some of you, however it works and I have no problems maintaining it.

  41. 101

    Hey,

    CSSComb is nice!

    I was wondering.. in addition to sorting the properties of elements, how about sorting elements as well?

    Does CSSComb do that already?

    P.S. this font is awesome.

  42. 102

    So CSS has come a long since I first started in 2005. Many of the tools and frameworks were sorely needed.
    What I cannot abide is the author of the article making the POOR argument “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.”

    Nice way to stereotype advocates of alphabetical properties. I completely understand grouping and why people do it. Even with your “groupings” it still takes longer to find what you’re looking for. In addition most people rarely truly “get / understand” CSS. So you have people who don’t really understand the technology grouping things they don’t understand. So you’re assumption this helps them learn seems incorrect.

    Also, you have to assume EVERYONE is using this system of grouping and immediately identifies it.
    When you sort properties alphabetically, you’re GUARANTEED other developers will know where to find things because A-Z is universal.

    FireBug alphabetizes properties. Hmmm…. I wonder why that could be?

    Nice tool, but give me a break.

    A – Z ALL THE WAY!

    FIGHT THE POWER! LOL

  43. 103

    Neat tool, but uninstalled it as soon as I figured out it was written in php.

  44. 104

    I think an even better approach would be to sort them alphabetically instead of functionally. Why not make this an option?

  45. 105

    Jens Oliver Meiert

    December 1, 2014 7:15 am

    Two late notes:

    Regarding sorting of vendor-specific extensions, at Google we had solved this by “ignoring“ the vendor prefix. See https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Declaration_Order#Declaration_Order. I haven’t looked at CSScomb for a while but this may be a sound feature.

    Regarding declaration sorting in general, alphabetical sorting appears to be by far the most efficient and best working way of sorting. I’m aware that some people prefer functional sorting, but with a constant influx of new properties that just asks for inconsistency—and in practice also gets that response. (Some thoughts: http://meiert.com/en/blog/20140924/on-declaration-sorting/.)

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top