Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

UnCSS: Remove unused styles from CSS

github.com

Post reply on HN
Print view View original

21–30 of 50 posts

Re: UnCSS: Remove unused styles from CSS

#21

Post by _nalply »

ry_ry wrote: post #11

Have used tools like this before, and invariably end up accidentally stripping styles from an component with a dynamically assigned className or something equally silly. It's such a hard problem to solve and the Stylesheet Snowball is one of the most frustrating pieces of technical debt a large site can pick up. It makes me wonder if scoped CSS modules, despite fundamentally breaking CSS with their hyper specific hyb…

I agree, it's a hard problem. Perhaps run a test-suite with UnCSS? If you still accidentally strip styles then the test-suite is not complete.

Re: UnCSS: Remove unused styles from CSS

#22

Post by Shinchy »

ry_ry wrote: post #11

Have used tools like this before, and invariably end up accidentally stripping styles from an component with a dynamically assigned className or something equally silly. It's such a hard problem to solve and the Stylesheet Snowball is one of the most frustrating pieces of technical debt a large site can pick up. It makes me wonder if scoped CSS modules, despite fundamentally breaking CSS with their hyper specific hyb…

The advent of Sass and Nesting helped an awful lot, but there is still much to be done.

Re: UnCSS: Remove unused styles from CSS

#23

Post by madeofpalk »

ry_ry wrote: post #11

Have used tools like this before, and invariably end up accidentally stripping styles from an component with a dynamically assigned className or something equally silly. It's such a hard problem to solve and the Stylesheet Snowball is one of the most frustrating pieces of technical debt a large site can pick up. It makes me wonder if scoped CSS modules, despite fundamentally breaking CSS with their hyper specific hyb…

This is already theoretically solvable with CSS Modules. Because you 'statically' import your CSS (class names) as an object, which can't/shouldn't change after build, you could run an analyser to remove any unused classes from the stylesheets. Essentially tree shaking for CSS.

Re: UnCSS: Remove unused styles from CSS

#24

Post by madeofpalk »

madeofpalk wrote: post #8
AliAdams wrote: post #2

I wonder what the performance increase would be of loading one big CSS file on the first page load and serving from local cache from then on, vs loading a smaller but different CSS file for each page you visit. My impression is that number of requests is a more critical optimization than file size (at least when serving CSS sized files)

It's going to depend a lot on the type of site you're building. Thankfully frontend pipelines like React + Webpack makes it fairly easy to test this out. We spiked out generating individual JS + CSS for each view but ultimately found it wasn't worth it - individual views amounted to very little code with the bulk of the filesize taken up by the common 'core' of our application, and dependencies. We scrapped this spec…

Just to clarify (after I've re-read my comment) - we didnt explicitly create a landing page stylesheet, instead we were able to use Webpack to automatically create a seperate stylesheet at build time containing just the styles used in the dependency tree of the landing page.

Webpack is super handy like that - no need to be aware of this and manually keep track of a seperate stylesheet :)

Re: UnCSS: Remove unused styles from CSS

#25

Post by dalkur »

egeozcan wrote: post #16
dalkur wrote: post #15

I've done something similar nearly two years ago[1]. The problem is rather difficult, especially with all the JavaScript frameworks in existence right now. I've tried to build a state machine for handling those frameworks but never got around to finishing it. There's basically and endless amount of combinations one can do, thus you probably want to limit depth or something. You also have to be able to detect ::after…

My naive opinion is that this should be done by the browser, perhaps in the developer tools. You would be marking a session as "integration tests" and at the end it would give you a simplified css file without the unused rules during testing.

I wholeheartedly agree with you. That would be the ideal solution, because the browser is already doing the passes over the CSS rules.

Re: UnCSS: Remove unused styles from CSS

#26

Post by vog »

ry_ry wrote: post #20
vog wrote: post #13

Earlier quoted context omitted.

> with a dynamically assigned className or something equally silly. How is that silly? Assume e.g. a very simply dynamic list, where you just want highlight rows after clicking on them. Should it set the CSS properties of the directly? It makes more sense to dynamically add/remove a CSS class such as "selected-row". However, since initially no row is selected that class does not appear in the initial HTML. > scoped C…

Oh dynamically setting class isn't silly, but the times i accidentally removed the 'unused' style because it's not explicitly coded into that app and was flagged by the tool, I felt pretty silly! I got as far as starting to build us a tool to traverse our raw jsx to identify these programmatically generated classes, but my implementation was a bit flakey for various reasons and required too much config to make it wor…

> Oh dynamically setting class isn't silly

Oh, so I misread your sentence. Thanks for the clarification. Sorry for the noise.

Re: UnCSS: Remove unused styles from CSS

#27

Post by anotheryou »

jwr wrote: post #6

I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser. That would have the advantage of supporting complex webapps written in any language/environment.

States can quickly become complex. Like styles for a logged in user with a 3-years-membership badge or styles for a placeholder that only new users see.

Or styles for a CMS module that is currently not in use (e.g. for open positions in a company).

I wonder what the least used, yet still used CSS is I ever wrote (relative to project traffic). Maybe some feature a Client requested, I knew he would never really use, but he insisted on (deep linking to some modal for a facbeook post or something).

Re: UnCSS: Remove unused styles from CSS

#28

Post by eli »

jwr wrote: post #6

I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser. That would have the advantage of supporting complex webapps written in any language/environment.

I've used this one before https://addons.mozilla.org/en-Us/firefox/addon/css-usage/

Re: UnCSS: Remove unused styles from CSS

#29

Post by noir_lord »

ry_ry wrote: post #11

Have used tools like this before, and invariably end up accidentally stripping styles from an component with a dynamically assigned className or something equally silly. It's such a hard problem to solve and the Stylesheet Snowball is one of the most frustrating pieces of technical debt a large site can pick up. It makes me wonder if scoped CSS modules, despite fundamentally breaking CSS with their hyper specific hyb…

I used BEM everywhere on the front end of a project, at the time I didn't really like it very much.

I came back to that project 7mths later and I could find everything exactly where I left it, I realised that past me had made a reasonable choice for the future.

Now I hold my nose and use it (or something like it) everywhere.

Even b- { } helps hugely, I just wish there was an easier way of stopping accidental stomping from other selectors outside b-.

Post reply on HN