Search code examples
csssassminify

Minifiers not merging selectors of same rules

I'm using sass to customize Bootstrap. But when analyzing the minified output, I see that there were two of body {} selectors.

Here is my compile command:

sass --load-path=./scss --style=compressed --no-source-map scss/bootstrap.scss ../../public_html/css/bootstrap.css

Not satisfied, I did a test several css minifiers in the internet in order to get the best minification. Here is the test input:

body{
    margin:0;
}

body {
    margin-top:60px;
}

Great part of websites returned this minification (which the same result returned by sass):

body{margin:0}body{margin-top:60px}

Which is not what I intended.

But one specific website returned this minification:

body{margin:60px 0 0}

Which library can grant me this incredible power of minification (Aka merging selectors of same rules)?

Solution

  • csso merges repeated selectors.

    Give it a try in this live minifier:

    https://css.github.io/csso/csso.html