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?
(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?