Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading