CSSnano

I've used it on a few projects successfully. The property ordering thing mentioned in other comments though is good to be aware of. It's not difficult to switch out for css nano if that is the case. The important feature for me was being able to target a browserlist string and flatten CSS nesting

Inviz2• 2 years ago

Why keep background-position, if background overrides it anyway?

troupo• 2 years ago

Can't say exactly why, but I had this suggested by IDEA (?) as well. Could be because background is a kitchen-sink of everything there is in a background including several different DSLs for gradients and such. So it makes sense to keep just background-position if there's a simpler background: the browser will spend less time processing it.

Whether that is measurable is a different story :)

Inviz2• 2 years ago

Yeah though within context of a single rule keeping that prop is pure overhead

seu• 2 years ago

This is all great, but while the internet is filled with auto-playing videos and invokes to external scripts from google, meta, amazon and who knows where, the example on this page is about saving... 148 bytes? Does minifying CSS really make a big difference, in the end? I'm guessing that a page with a serious CSS payload (say, over 100k) already has more serious weight problem elsewhere.

tosh2• 2 years ago

The main problem with CSS is that it is "render blocking". If you want the user to see stuff sooner you have to make the CSS smaller and/or serve it faster (e.g. inline it to avoid another request).

agos2• 2 years ago

how sooner will I see the stuff if I use this tool?

agos2• 2 years ago

never mind a "big" difference, I would be surprised if it made a "measurable" difference

hawski• 2 years ago

CSS is a high level language used very often as a low level one. The styling doesn't use any "cascading" and everything is repeated all the time. In this context minifying can make a difference. But either way it is not among my favorites.

littlestymaar2• 2 years ago

Does minifying make any difference if you're gzip-ing it in-flight anyway?

Edit: I mean, in the real world. Obviously in their example gzip does pretty much nothing since there's so little content, which leave very little room for compression.

theandrewbailey• 2 years ago

CSS is text based, so it should be gzip (or brotli) compressed. Minifying something isn't as effective as compressing it. You could do both, but the difference is small.

zamadatix• 2 years ago

The numbers above are already referring to the gzipped raw vs gzipped minified.

paulddraper2• 2 years ago

1. The README example is 54% reduction (for gzipped result).

2. CSS often blocks page render, to avoid flashing unstyled content.

3. "Tree-shaking" CSS is often difficult or impossible.

Many (most?) CSS libraries minify their outputs...Bootstrap, Materialize, Semantic UI, Foundation.

emmacharp• 2 years ago

I started linking component stylesheets directly in the component HTML, de facto eliminating unused CSS from the output. HTTP3 provides performance gains we can benefit from by serving multiple CSS files "just-in-time".

I've had great results since. No more unused CSS. No more minifying nor bundling. What you write is what you get. It's liberating! Hehe.

weinzierl• 2 years ago

Is there a tool that can remove unused CSS while considering static HTML?

What I have in mind is a tool that I throw a CSS file and a bunch of static HTML files at, it will try to apply each CSS rule to the HTML like a browser would and remove all the rules that don't apply.

I don't expect it to ascertain if a rule had visible effects. I also don't expect it to consider JavaScript. Just plain CSS and static HTML. It doesn't look to me like CSSnano or LighteningCSS could do that.

csande17• 2 years ago

https://purgecss.com/ does this, kind of -- it used to be recommended by Tailwind back when Tailwind shipped a giant zip-bomb stylesheet of every possible property/value combination by default. I don't think it does the more complicated browser-like analysis you mention, though; it might just check whether class names appear in your HTML using a regex search.

The AMP WordPress plugin also does something like this IIRC (to try and fit stylesheets into AMP's size limit) but the tooling for it might be written in PHP.

alberth• 2 years ago

How do you remove the unused CSS?

https://purifycss.online/

Above is a nice online version of Purify. But it just seems to minimize the CSS, and doesn’t delete the unused CSS.

stigok• 2 years ago

This would work nicely with static HTML, indeed. But once you have some JavaScript i.e. dynamic HTML, it won't work reliably anymore. Worse, it might even give you a list of manually curated CSS properties to "allow list".

merb2• 2 years ago

this is incorrect.

the only thing that does not work is generating the css class like:

var x = 'hase-';

var t = x + 'danger'

which is an antipattern. (it can even happen inside java, c#, whatever language you use and it is still an antipattern)

Izkata• 2 years ago

Waaay back there used to be a Firebug plugin that would monitor which CSS was ever used as you interacted with a page. Worked great for exactly these dynamic pages - I was using it with React for a few years before Quantum killed the XUL addons.

I'd forgotten about it and am now wondering if anyone made a replacement...

craftkiller• 2 years ago

I wrote that for my company ~3 jobs ago, except instead of working only on static HTML, it would: for a small percentage of our traffic loop in the background processing a couple CSS selectors at a time, adding CSS selectors that matched to a bloom filter that would be occasionally POSTed back to the server. Then I'd parse through our logs, pulling out the bloom filters, and comparing them to our CSS rules to find unused rules. It wasn't perfect so it required manually checking before deleting CSS rules but it went a long way towards flagging potentially unused CSS rules.

lofaszvanitt• 2 years ago

People need more things that can be discovered. Everyone reinvents the wheel rn.

a-french-anon• 2 years ago

Eh, even on this example, most of the gains come from simply removing the comments (something that can easily be done with `cpp -E -P <in.css >out_cpp.css` or regexps since CSS doesn't allow comment nesting) on most UNIXes.

Here's a more complete result adding brotli and the aforementioned cpp version:

  $ gdu -b *.css *.css.gz *.css.br | awk '{if (NR % 3 == 1) {ref = $1; print} else print $0, "(" $1 - ref ")"}'
  623 in.css
  197 out.css (-426)
  355 out_cpp.css (-268)
  345 in.css.gz
  185 out.css.gz (-160)
  235 out_cpp.css.gz (-110)
  284 in.css.br
  141 out.css.br (-143)
  177 out_cpp.css.br (-107)

sionisrecur2• 2 years ago

cpp as in a C preprocesor? That's a neat trick. I guess it removes what looks like /* comments */ and leaves the rest alone?

no_wizard• 2 years ago

cssnano has had some complicated ownership turnover[0], I'm glad to see someone took the mantle again though.

I do find that CSSO[1] with structural optimizations can be more effective still, perhaps that will be less true overtime though.

I think once lightning CSS is more stable (in particular, some bugs are addressed around ordering) it will be the clear winner in this space though.

[0] https://github.com/cssnano/cssnano/issues/833

[1] https://github.com/css/csso

CSSnano

Related Stories