6 ms·

Tools for Auditing CSS

90 points by starbist 6y ago

Waterluvian 6y ago
Is anyone aware of a tool that would allow me to manually walk my entire app and any css that doesn't get used can be flagged for deletion? I find that even with well behaved libraries and tree shaking, my output css still includes a lot of stuff I don't need. (Eg. Yes I use Foo.Button but I don't need all the css for the styles of Foo.Button I never use like circular or large or withIcon)
- fbelzile 6y ago
  Tailwind has this built in if you're open to a new framework completely: https://tailwindcss.com/ https://tailwindcss.com/
  - cageface 6y ago
    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.
  - butt_hugger 6y ago
    Don't use Tailwind, it's garbage.
    - Brajeshwar 6y ago
      Can you please elaborate? Personal anecdotes, development experiences that made you feel that way.
      - blacktriangle 6y ago
        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.
    - bgroat 6y ago
      That's a hot take
      - butt_hugger 6y ago
        So hot it's almost 20 years old!
    - 14u2c 6y ago
      Care to provide any reasons?
    - runarberg 6y ago
      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?
  - minusf 6y ago
    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...
- tyingq 6y ago
  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 https://imgur.com/a/TLywsv5 [1] https://developer.chrome.com/docs/devtools/coverage/ https://developer.chrome.com/docs/devtools/coverage/
  - Waterluvian 6y ago
    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.
    - deleted 6y ago
      [deleted]
    - tyingq 6y ago
      Here's someone doing it with puppeteer: https://blog.fullstacktraining.com/remove-unused-css-javascript-code-from-your-project/ https://blog.fullstacktraining.com/remove-unused-css-javascr...
  - mgerullis 6y ago
    Mhh I am sure it could be possible to walk the app with cypress or puppeteer while raising this coverage.
- mblode 6y ago
  PurgeCSS is a tool to remove unused CSS styles https://purgecss.com/ https://purgecss.com/
- kingkool68 6y ago
  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/ https://developer.chrome.com/docs/devtools/coverage/
- cjpearson 6y ago
  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.
  - DrOctagon 6y ago
    This works for me in most cases: https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html https://tailwindcss.com/docs/optimizing-for-production#writi...
    - cjpearson 6y ago
      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.
- runarberg 6y ago
  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.
- genericstorage3 6y ago
  That's why css in js is much better. Once your html is out, css is also out.
system2 6y ago
My tools for CSS are my eyes and bunch of browsers. No matter what I do (LESS etc.) something always gets messed up at the end.
h3mb3 6y ago
Hmm... I wonder why stylelint wasn't mentioned? [1] I thought it was nowadays kinda the CSS equivalent to ESLint. We added it (in tandem with Prettier) to a codebase that uses lots of old SCSS. So far it's been a good gatekeeper as the team has been growing, blocking the most questionable .scss edits in PRs. We had to disable and ignore many of the rules to fit it together with our legacy files though. [1] https://stylelint.io/ https://stylelint.io/
- bryanrasmussen 6y ago
  Linting tools tend to be a combination of rules that make your code nicer to look at by some relatively arbitrary stylistic convention and rules for keeping out code that because of the nature of the language can lead to footguns. Stylelint in my experience is almost all, if not all, about enforcing stylistic convention. I can't stand it because I do not find most of the stylistic conventions enforced to actually improve legibility.
  - h3mb3 6y ago
    In my experience there are a fair amount of rules in the second category of yours (anti-footguns). For instance, preventing invalid properties alone is a huge one. There are also rules like [1], a few violations of which popped up in our legacy styles. No dev of ours would've caught those. [1] https://stylelint.io/user-guide/rules/no-descending-specificity https://stylelint.io/user-guide/rules/no-descending-specific...
    - bryanrasmussen 6y ago
      hmm, maybe it's just that I am only being caught out by the styling rules, or maybe it is that I am pretty good at understanding the cascade so the linked example is actually something that - while probably a footgun - for me is likely to be annoying because I actually wanted to do what I did. But I guess deploying a footgun is often a minimum two person job: first person writes code that when used wrong will shoot in foot but they would never use wrong, next person actually pulls the trigger.
  - 6y ago

90 points by starbist 6y ago

Is anyone aware of a tool that would allow me to manually walk my entire app and any css that doesn't get used can be flagged for deletion? I find that even with well behaved libraries and tree shaking, my output css still includes a lot of stuff I don't need. (Eg. Yes I use Foo.Button but I don't need all the css for the styles of Foo.Button I never use like circular or large or withIcon)

fbelzile 6y ago
Tailwind has this built in if you're open to a new framework completely: https://tailwindcss.com/ https://tailwindcss.com/
- cageface 6y ago
  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.
- butt_hugger 6y ago
  Don't use Tailwind, it's garbage.
  - Brajeshwar 6y ago
    Can you please elaborate? Personal anecdotes, development experiences that made you feel that way.
    - blacktriangle 6y ago
      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.
  - bgroat 6y ago
    That's a hot take
    - butt_hugger 6y ago
      So hot it's almost 20 years old!
  - 14u2c 6y ago
    Care to provide any reasons?
  - runarberg 6y ago
    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?
- minusf 6y ago
  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...
tyingq 6y ago
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 https://imgur.com/a/TLywsv5 [1] https://developer.chrome.com/docs/devtools/coverage/ https://developer.chrome.com/docs/devtools/coverage/
- Waterluvian 6y ago
  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.
  - deleted 6y ago
    [deleted]
  - tyingq 6y ago
    Here's someone doing it with puppeteer: https://blog.fullstacktraining.com/remove-unused-css-javascript-code-from-your-project/ https://blog.fullstacktraining.com/remove-unused-css-javascr...
- mgerullis 6y ago
  Mhh I am sure it could be possible to walk the app with cypress or puppeteer while raising this coverage.
mblode 6y ago
PurgeCSS is a tool to remove unused CSS styles https://purgecss.com/ https://purgecss.com/
kingkool68 6y ago
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/ https://developer.chrome.com/docs/devtools/coverage/
cjpearson 6y ago
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.
- DrOctagon 6y ago
  This works for me in most cases: https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html https://tailwindcss.com/docs/optimizing-for-production#writi...
  - cjpearson 6y ago
    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.
runarberg 6y ago
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.
genericstorage3 6y ago
That's why css in js is much better. Once your html is out, css is also out.

system2 6y ago

My tools for CSS are my eyes and bunch of browsers. No matter what I do (LESS etc.) something always gets messed up at the end.

h3mb3 6y ago

Hmm... I wonder why stylelint wasn't mentioned? [1] I thought it was nowadays kinda the CSS equivalent to ESLint. We added it (in tandem with Prettier) to a codebase that uses lots of old SCSS. So far it's been a good gatekeeper as the team has been growing, blocking the most questionable .scss edits in PRs. We had to disable and ignore many of the rules to fit it together with our legacy files though. [1] https://stylelint.io/ https://stylelint.io/

bryanrasmussen 6y ago
Linting tools tend to be a combination of rules that make your code nicer to look at by some relatively arbitrary stylistic convention and rules for keeping out code that because of the nature of the language can lead to footguns. Stylelint in my experience is almost all, if not all, about enforcing stylistic convention. I can't stand it because I do not find most of the stylistic conventions enforced to actually improve legibility.
- h3mb3 6y ago
  In my experience there are a fair amount of rules in the second category of yours (anti-footguns). For instance, preventing invalid properties alone is a huge one. There are also rules like [1], a few violations of which popped up in our legacy styles. No dev of ours would've caught those. [1] https://stylelint.io/user-guide/rules/no-descending-specificity https://stylelint.io/user-guide/rules/no-descending-specific...
  - bryanrasmussen 6y ago
    hmm, maybe it's just that I am only being caught out by the styling rules, or maybe it is that I am pretty good at understanding the cascade so the linked example is actually something that - while probably a footgun - for me is likely to be annoying because I actually wanted to do what I did. But I guess deploying a footgun is often a minimum two person job: first person writes code that when used wrong will shoot in foot but they would never use wrong, next person actually pulls the trigger.
- 6y ago