How to merge and clean 2 css files with overlapping selectors/properties?
<p>Here I am, trying to do a decent job at maintaining a site and adding new elements to it. But before that, I'd like to clean its css files.</p>
<p>That site is using 2 stylesheets, a v1 and a v2. Basically, the v2 adds new rules but also overrides rules/properties from the v1. So I can't just get rid of v1 because v2 doesn't contain all rules and properties.</p>
<p>Here's a quick example</p>
<p>From v1</p>
<pre><code>.globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 15px;
}
</code></pre>
<p>From v2</p>
<pre><code>.globalFooter {
    font-size: 18px;
    display: inline;
}
</code></pre>
<p>And so, the result should be like</p>
<pre><code>.globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 18px;
    display: inline;
}
</code></pre>
<p>I thought about manually merging v2 into v1, moving the new elements and overriding properties, but v2 is 3000 lines long...</p>
<p>So then I tried to find a tool that would do that automatically but I didn't find anything solid.
I need something that can merge the two files and consider that the 2nd file is loaded after, so it can overrides rules and properties of the 1st one.</p>
<p>Does someone know a good tool/script doing that ?</p>
<p>Thanks</p>