Comment by zelphirkalt | Hacker News Reader

Comment by zelphirkalt | Hacker News Reader

When a site's CSS is well written, with a capable web developer knowing, what they are doing, such a tool would not be necessary. People pump out megabytes of JavaScript, but then they worry about a few kilobytes of CSS being saved by compressing it, at the same time making it less readable by minifying it. (We are not yet shipping hundreds of kilobytes of CSS, are we?!)

When there is a need for a tool that minifies CSS, then people seriously need to ask themselves, how it can be, that they have that much CSS. How much redundant CSS can you accumulate? Was there no coherent styling idea or strategy, so that every thing on the page needs separate styling?

What many forget is, that data is often sent gzip compressed anyway, which naturally takes advantage of repeated parts to compress. Text usually compresses pretty well. Especially something like a description language with many repeating parts. It is great, that Parcel CSS is faster than some other tool. However, for me, these kind of tools are merely treating the symptoms of not doing styling properly. I'm glad, that I got to know the web, when you simply could look at all the source of a page and learn from it, instead of facing a multi megabyte "minified" script and "minified" CSS.

> We are not yet shipping hundreds of kilobytes of CSS, are we?

Well, Bootstrap 5 is ~200K when not minified and a web site usually ships additional CSS resources as well.

Oh my ... Does one need all of that? Isn't there a process of reducing it to only what one needs? I think there was something like that in the past. Not sure how well that works.

> Isn't there a process of reducing it to only what one needs?

One such process is what you're commenting on here in this thread.

I am more talking about "Only ever include the CSS rules we need." instead of "Lets take the whole of bootstrap! Oh damn, we have to somehow reduce it!".

If memory serves me right, you could compile the Bootstrap library and choose the parts you needed. Not sure if that is still true for Bootstrap 5. If it is not possible, it stands to reason, that perhaps one should not use Bootstrap 5 and instead write good styling oneself, without all the stuff, that will never be used on the site anyway.

CSS can be tricky, but in the end, reasonable styling is usually not that hard to do. Even responsiveness can be done mostly without media queries these day, unless you want content to change, if layout changes. It used to be much harder, when our browser standards were not that far. Nowadays we have flex and grid and more standardized interpretations of CSS rules in browsers. We can make navigations, menus, tiles and whatever all responsive without that much work put in.

From the Parcel CSS page : it does 'tree shaking', which automatically eliminates unused code. Not details on what that implies, though. Tools like PurgeCSS (used by Tailwind pre-v3) comb through the HTML for matching selectors, but I'm not sure if Parcel does the same thing.

Anyway, as others comments said, these kind of tools nowadays are more 'transformers' than mere 'minifiers'.

That's really nice, but to me still sounds like the wrong way to go. Instead of reducing something that is too much, that which is too much should not have been added in the first place. We are doing work here, removing, what we have previously added.

I wonder how much ineffective styling still remains after "tree shaking". I guess the fancy tree shaking is out of luck, if we add unnecessary styling to elements, which are indeed used. It seems a really hard problem to solve automatically, to transform CSS in a way, that takes care of redundancies and unnecessary styling, while still maintaining the readability, which well crafted CSS can have.

> that which is too much should not have been added in the first place.

The problem is, with CSS you don't know if you've added too much. As the project evolves, and code and styles change there's literally no way of knowing if a certain CSS rule is still in use Well, except regexp'ing the whole project looking for matches.

> regexp'ing the whole project looking for matches

That's basically what these tree-shaking tools do.

> Isn't there a process of reducing it to only what one needs?

Yes there is:

https://github.com/uncss/uncss

https://github.com/purifycss/purifycss

and https://github.com/leeoniya/dropcss, if you're feeling adventurous ;)

You can switch to WindiCSS or Tailwind and use the optimized output. That is usually a lot shorter.

Tailwind actually has its own jit compiler for development since the old, full css was extremely long. Windi always creates small css as far as I remember.

This is not a good argument, because no matter how well you write anything, reducing its size is beneficial for everyone.

As someone who regularly adds custom CSS to sites to fix various UI issues/annoyances, I can say that I'm definitely not a fan of minified CSS classes.

What a load of crock. You should always use a css minifier to - at minimum - remove white space and trailing semicolons.

i doubt there's a noticeable difference after applying any "dumb" file compression scheme, e.g. brotli/gzip

Reply on news.ycombinator.com