Article 5N8QM Tool to split/reorganize CSS stylesheets

Tool to split/reorganize CSS stylesheets

by
boughtonp
from LinuxQuestions.org on (#5N8QM)
I have some untidy CSS stylesheets to cleanup/reorganize, and was hoping there was a tool to reduce the effort, but none of my searches have turned up anything.

(Note: I am not switching to pre-processor supersets like LESS or SASS.)

Specifically, I want to split CSS rules into logical grouping - e.g: colour, font/text, whatever - so that, given input such as:

Code:body
{
margin: 0 auto;
background: #FFF;
font-family: sans-serif;
text-align: center;
color: #000;
}

header h1
{
display: inline-block;
font-size: 2em;
font-weight: normal;
margin: 0;
color: #888;
}

header a
{
color: #000;
}The tool would produce output divided into sections along the lines of:

Code:/* colours */
body
{
background: #FFF;
color: #000;
}

header h1
{
color: #888;
}

header a
{
color: #008;
}

/* text */

body
{
font-family: sans-serif;
text-align: center;
}

header h1
{
font-size: 2em;
font-weight: normal;
}

/* box model */

body
{
margin: 0 auto;
}

header h1
{
display: inline-block;
margin: 0;
}Except with more complex CSS rules, potentially including nested media queries.

It might be possible to do this with Sed, but I'm not sure if there's any weird edge cases, so was hoping to find a syntax-aware tool to just do it and avoid any such issues.

I'm sure someone somewhere must have done this already, but search engines suck and are not giving me anything remotely relevant - even the usual method of forcing keywords with +"sed" is not having any effect.

So yeah, anyone know of anything that might help?

latest?d=yIl2AUoC8zA latest?i=NusK1BWKT40:e8drtVfWz2A:F7zBnMy latest?i=NusK1BWKT40:e8drtVfWz2A:V_sGLiP latest?d=qj6IDK7rITs latest?i=NusK1BWKT40:e8drtVfWz2A:gIN9vFwNusK1BWKT40
External Content
Source RSS or Atom Feed
Feed Location https://feeds.feedburner.com/linuxquestions/latest
Feed Title LinuxQuestions.org
Feed Link https://www.linuxquestions.org/questions/
Reply 0 comments