How to rearrange css code in .css files

Hello,

I want to rearrage the styles inside my css classes in alphabetical order like in the example bellow, how can I achieve that with PhpStorm ?

.1
{
b:
c:
a:
}

.2
{
c:
a:
b:
}

to sort it

.1
{
a:
b:
c:
}

.2
{
a:
b:
c:
}

and that's it no other changes ...

Thanks

6 comments
Comment actions Permalink

Here is the exact code which I would like to reformat, to arrange the styles in alphabetical order but without to change brackets, commas, spaces ...etc

/* styles for 768px or more */
@media screen and (min-width: 768px)
{
    .content_placeholder
    {
        border: 1px solid red;
        box-sizing: border-box;
        width: 50%;
        float: left;
    }

    .content
    {
        margin: 10px;
        border: 1px solid blue;
    }
}

/* styles for 768px or less */
@media screen and (max-width: 768px)
{
    .content_placeholder
    {
        border: 1px solid red;
        box-sizing: border-box;
        float: none;
    }

    .content
    {
        margin: 10px;
    }
}

0
Comment actions Permalink

Hi there,

You can try CSSReorderer plugin.

Other than that: http://youtrack.jetbrains.com/issue/WEB-22

0
Comment actions Permalink

I've installed CSSReorder but how do I use it ?

Thanks

0
Comment actions Permalink
I've installed CSSReorder but how do I use it ?

https://github.com/anton-rudeshko/CSSReorder -- USAGE section

0
Comment actions Permalink

Thanks, it's working nice, but I can't find where to choose how to rearrange the code, based on alphabetical order or element order ... By default is by element.
Or if to rearrange the brackets or not ...

0
Comment actions Permalink

Please contact plugin author for details -- I do not know as I have never used this plugin myself.

0

Please sign in to leave a comment.