Chrome has a css coverage tool built in[1]. I suppose it's tricky though, since some html is only visible if there an error (error boxes, etc), or only visible in some rare state (logged in as admin, etc).

Screenshot of it looking at unused CSS on HN: https://imgur.com/a/TLywsv5

[1] https://developer.chrome.com/docs/devtools/coverage/

Mhh I am sure it could be possible to walk the app with cypress or puppeteer while raising this coverage.

Huh. I wasn't aware. Thanks. I'll have to see if there's a sensible way to get the results in a format that can be used to progrmatically cull a build output.

Here's someone doing it with puppeteer: https://blog.fullstacktraining.com/remove-unused-css-javascr...

Tailwind has this built in if you're open to a new framework completely: https://tailwindcss.com/

Tailwind drastically reduced the overall size of my CSS bundles. And it stopped that inevitable, gradual CSS bloat that I used to see on longer lived projects too.

isn't it postcss/purgecss doing this on tailwind's behalf?

this process also strips styles that are not in the actual html/template files being scanned and are only shown in error paths or in some other way.

it also strips styles applied directly to tags (without class).

i find it quite messy to maintain purge ignore lists and making extra-extra sure that the removal regexp is correct as it can remove valid classes added/removed by templating libraries like jinja.

proper css coverage is more than a glorified grep that looks for all the tailwind class names...

Don't use Tailwind, it's garbage.

Personally I’m not in favor of CSS in classes, so I wouldn’t use tailwind given the choice. But tailwind does look like a perfectly fine framework if you are into that sort of thing. I don’t claim to understand people that want to write all their styles in the class attribute. But if you do, I don’t see a reason why Tailwind would be garbage. In fact it looks like a perfectly fine tool for a workflow that I personally don’t use.

Do you have a personal experience you would like to share?

Can you please elaborate?

Personal anecdotes, development experiences that made you feel that way.

I really don't like how it handles responsive design, but that could also be because I work more on apps than marketing sites. First, fixed device breakpoints doesn't seem like the way to go, I find I need more customized breakpoints that are based around the UI rather than having general phone/tablet/desktop breaks. Then because you are applying styles to each element for each breakpoint, its very hard to look at and comprehensively think about a single breakpoint's layout. I can see where this works for making minor changes here and there, but major layout changes with breaks are almost impossible to keep in your head.

Then with flex box it lacks a great deal of customizability when it comes to controlling how space is distributed across elements.

And somewhat bigger picture, I'm looking to use less tooling and preprocessing, not more. CSS has come a long way to where we can now get rid of SASS, but instead Tailwind is replacing that step with fullying buying into the whole webpacker tool chain. If you're already really into webpacker that's not a huge issue, but brining along node and webpacker just for a CSS library is a bit much.

That's a hot take

So hot it's almost 20 years old!

Care to provide any reasons?

PurgeCSS is a tool to remove unused CSS styles https://purgecss.com/

I think Svelte does something like that by default. I would love to see more frameworks pick this up. I think it wouldn’t bee hard for e.g. Vue or Stencil to do something similar since they have their own compilers.

I've struggled with this as well. As far as I can tell there isn't a good solution, but I'd love to be proven wrong.

You can run PurgeCSS in a dry mode to find any unused selectors, but it can't handle any classes that are dynamically generated. If your codebase has used anything like `buttonClass = 'button-' + color`, you may get false positives.

The Chrome Dev Tools coverage can show you how much of a stylesheet is used at runtime, but if you concat everything into a single css file that's used for every page, a single page's usage doesn't help.

This works for me in most cases: https://tailwindcss.com/docs/optimizing-for-production#writi...

Yeah, I do like working with Tailwind and PurgeCSS and that setup works great. It's a good way of avoiding the unused CSS problem in the first place.

The problem for me is digging into a large existing codebase which has built up thousands of semantic class names and a bunch of nesting in the CSS. I'd like a tool that could tell me what's probably not being used, which I could then use as a starting point for some clean up.

There are various browser extensions that do that. Chrome Dev Tools has a coverage tab to do something similar.

https://developer.chrome.com/docs/devtools/coverage/

That's why css in js is much better. Once your html is out, css is also out.