user3629023
user3629023

Reputation: 177

css minifier to merge selectors with same properties

I've been using Adobe Reflow to generate layouts. but to my horror, i found that it creates a separate selector for identical elements too, and each of these selectors have their properties defined separately. This has resulted in enormous file sizes for small documents. I cannot manually merge these selectors due to their enormous size. I've tried several minifiyng programs, but none of them have solved my problem.

in short, need a minifier that can convert:

  #div1{ height:50px; color:'blue';}
 #div2{ height:50px; color:'blue';}

to

 #div1, #div2{ height:50px; color:'blue';}

Upvotes: 2

Views: 2381

Answers (3)

S.Serpooshan
S.Serpooshan

Reputation: 7440

This is best tool based on its description and samples:

CSS minifier with structural optimizations https://css.github.io/csso/csso.html

for example:

var result = csso.minifyBlock('color: rgba(255, 0, 0, 1); color: #ff0000');

console.log(result.css);
// > color:red

Which seems so smart!!

Upvotes: 2

Stickers
Stickers

Reputation: 78686

My favorite online compressor is - http://refresh-sf.com/ it will do the merge for you.

Upvotes: 2

Rob Scott
Rob Scott

Reputation: 8049

Just ran this code on http://www.cssportal.com/css-optimize/, it worked keeping the default settings. Unfortunately I've never used this before and don't know how it would work on a large CSS file.

Hope that can point you in the right direction.

Upvotes: 0

Related Questions