Restyle Your CSS Declarations With CSScomb

How do you order your CSS properties? Some developers prefer an alphabetical list. Some prefer grouping by related types. Ultimately, it doesn’t matter. There’s no ‘wrong’ way and you should use whatever style suits you. It will become a habit and you’ll be able to shave precious seconds when searching your own CSS code.

But what if you’re looking at one of your older stylesheets? What if you inherit someone else’s code? What if the file has been coded by developer who uses the force every time they declare a property? You’ll either lose a couple of hours re-ordering every declaration or several seconds every time you attempt to locate a property.

Enter CSScomb.

It’s a free tool which sorts all CSS properties in a stylesheet or inline HTML style attributes. You can set your own ordering preferences once and apply them consistently whenever necessary.

CSScomb

There’s a slick online version; simply paste in your code, hit Resort and the differences are shown which you can copy or edit.

Alternatively there are plug-in editions for popular text editors including Sublime, Textmate, Coda, Expresso, WebStorm, Notepad++ and Vim.

CSScomb is a great idea which is well-executed and incredibly useful when you want to transform my dumb ordering method into your own. Recommended.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Patrick

    It’s worth noting that this tool works with LESS and SASS files as well as plain CSS. Since I assume/hope most SitePoint readers use a CSS preprocessor rather than writing “vanilla” CSS, that’s a key point in its favor.

    I assume that Stylus documents will also work (unless you’re using the minimal syntax), as they are syntactically extremely similar to SASS documents.

    • Gary Sprung

      This here developer does not even know what a CSS preprocessor is. Care to explain?

      • http://milesmaxwell.com Miles

        Just Patrick showing everyone how smart he is.

        http://sass-lang.com/

      • Dave

        Ask Google

  • http://2flez.tk Donald

    It’s all rosy here!

  • Benoit

    @Patrick I am hapily rewriting my entire css from scss to plain old vanilla css.

    I don’t think preprocessors are worth the pain in setup (compass at least), and following changes in syntax every new versions.

    I don’t blame such projects, but in my case of business application with very lightweight stylesheet it was not an improvement in productivity or performance.

    We do not choose architecturing on alphabetical order cause it has very little sense to do this. We choose the modular approach explained in SMACSS method. By now it feels very good to us coming from a hybrid css/scss from various files overriding each other in an infamous spaggeti soup! The method is also compatible with preprocessors.

  • Cody Gregory

    Lol… Priestly jargon needs clarity.
    I like the idea of this comb, and possible other utilities, to manage that which has bloated in recent years.

  • Rachel

    It amazes me how anyone could go back to vanilla CSS after using SASS. It had me on Hello. I am using SASS to overhaul 12 fairly different in-house eCommerce sites onto a single responsive framework and am loving it.
    The only issue for me is that a lot of these useful online tools don’t work with SASS so I was surprised to read that this one does, nd I guess I am lucky that I am the only person working on the CSS side of the project so have absolute control over how they are structured.

    • Rachel

      No luck parsing SASS without errors

      background:url(“@{logo}”) 0 100% no-repeat transparent;
      became
      background:url(“@{logo;}”) 0 100% no-repeat transparent;

      &.small{background-position:0 -1400px;background-size:250% auto}
      became
      &.small{background-position:0 -1400px;background-size:250% auto}”) 0 71.2% repeat-y;

      li a{height:24px;line-height:24px;margin:0;padding:0 !important;width:24px;background:transparent;text-align:center;}
      became
      li a{margin:0;padding:0 !important;width:24px;height:24px;background:transparent;text-align:center;line-height:24px;line-}

      • Rachel

        When I said SASS above I really meant LESS. Just testing you all there.

  • http://www.nispaara.com Nispaara

    I really liked the idea!!!

  • http://www.nispaara.com Nispaara

    Very informative article.. Thanks for sharing it.