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

Critical CSS? Not So Fast

csswizardry.com

Post reply on HN
Print view View original

31–40 of 90 posts

Re: Critical CSS? Not So Fast

#31

Post by norman784 »

dotancohen wrote: post #22
dpacmittal wrote: post #8

Earlier quoted context omitted.

This is the reason I love tailwind. There's no bloat, no headache of naming conflicts (in fact they completely did away with naming), no orphan css. CSS for a full blown website can be less than 5kb. It takes away the pain of thinking about CSS architecture, naming things, conflicts etc and you can just focus on styling.

Tell us a bit more about Tailwind. Last I looked at it a few years ago it seemed a conglomeration of antipatterns. Quick googling is not convincing. Assume that I know _nothing_ about Tailwind, sell it to me. I'd appreciate it. Thanks.

Aside from was being said, for me, at least when developing component based app, it the better choice IMHO, most css classes contains just one css rule, so you when reading your component class already can visualize how the component looks like. If you are developing a old school web, I would say it could be a pain if you mid project want to change the style of one element (because you are not using components) you need to find and replace every occurrence of the elements classes.

Also not to mention, you skip all the nonsense of the CSS in JS and the need of tools to extract the CSS from JS. Also other big win is that you can use with other projects not based on JS, I'm toying with a WASM app and use tailwind without issues, just run the tailwind bin on my app change (takes a second or less to generate the css file), the only downside here is the need of nodejs (you might be able to download the binary directly and run that, like I do on CI).

Re: Critical CSS? Not So Fast

#32

Post by youngtaff »

laundermaf wrote: post #15
eyelidlessness wrote: post #3

In my experience “critical styles” are necessary to load fonts efficiently if you load any, and it’s beneficial to load a few color styles at the same time. Other than that it’s better to load them as separate resources.

I’m not sure you know exactly what “critical CSS” refers to because it’s unrelated to font loading and “color styles.” It has to do with inlining the CSS required for content “above the fold” while loading the rest asynchronously.

Not necessarily just for content above the fold there is more than one way to split between critical and non-critical e.g. styles for initial page render vs those used on interaction (for a popup menu for example)

Re: Critical CSS? Not So Fast

#33

Post by youngtaff »

porker wrote: post #18
laundermaf wrote: post #16

Earlier quoted context omitted.

I don’t find the HTTP headers approach useful. Headers only appear a few bytes before the HTML so if you keep the regular link tag right at the top of the file you’re good to go; no need to mess with headers. Every HTML file should start with: doctype, html tag, head tag, charset meta tag, title, stylesheet link tag. A couple of those tags are even optional.

Once HTTP 103 is better supported this will improve.

Only if there’s a gap between the 103 response and the head content arriving

Re: Critical CSS? Not So Fast

#34

Post by cageface »

dpacmittal wrote: post #8
ehnto wrote: post #6

First up, agree with the author. Now if I may, a rant. It boggles the mind that we style bikeshed over CSS. Is it honestly, truly, and pragmatically worthwhile to spend all this engineering effort manipulating, culling, tree shaking, modularizing our CSS? Pre-load that, inline this, async-load that, and what have we got for it? A web full of wiggling content, slow CDNs, dozens of requests, and an experience of a mis-…

This is the reason I love tailwind. There's no bloat, no headache of naming conflicts (in fact they completely did away with naming), no orphan css. CSS for a full blown website can be less than 5kb. It takes away the pain of thinking about CSS architecture, naming things, conflicts etc and you can just focus on styling.

I'm a huge fain of Tailwind but if you're using react you can also consider styled-system:

https://styled-system.com

It seems to have a lot of the benefits of Tailwind but better integration with Typescript.

Re: Critical CSS? Not So Fast

#35

Post by danielvaughn »

dotancohen wrote: post #22
dpacmittal wrote: post #8

Earlier quoted context omitted.

This is the reason I love tailwind. There's no bloat, no headache of naming conflicts (in fact they completely did away with naming), no orphan css. CSS for a full blown website can be less than 5kb. It takes away the pain of thinking about CSS architecture, naming things, conflicts etc and you can just focus on styling.

Tell us a bit more about Tailwind. Last I looked at it a few years ago it seemed a conglomeration of antipatterns. Quick googling is not convincing. Assume that I know _nothing_ about Tailwind, sell it to me. I'd appreciate it. Thanks.

I hated the idea of Tailwind when I first saw it. Decided on a whim last year to give it a solid try after hearing others say "you just have to experience it for yourself". I tried it, and now it's literally painful going back to anything else. I can't explain it, it's just magical.

In my opinion, Tailwind is to CSS what jQuery was to Javascript. It's just the right level of abstraction that you need.

But you have to just try it for yourself and experience it. I'd recommend using it with VSCode's intellisense plugin.

Re: Critical CSS? Not So Fast

#36

Post by danielvaughn »

christophilus wrote: post #28
dotancohen wrote: post #22

Earlier quoted context omitted.

Tell us a bit more about Tailwind. Last I looked at it a few years ago it seemed a conglomeration of antipatterns. Quick googling is not convincing. Assume that I know _nothing_ about Tailwind, sell it to me. I'd appreciate it. Thanks.

Been developing websites and apps since the days when we are worrying about the y2k bug. Tailwind is my favorite thing. Almost everything that I disliked about CSS is solved by it. Once you really kick the tires, you become way more productive: Naming is hard. No more naming. Switching between your markup and your CSS added friction to your flow. No more friction. Avoiding problems caused by overly aggressive rules /…

I feel the same way about Tailwind, but haven't taken the plunge on Tailwind UI. Though I kinda want to buy it just to support the team. Do you feel like it constrains you too much, or no?

Re: Critical CSS? Not So Fast

#37

Post by rafram »

vehemenz wrote: post #29
dotancohen wrote: post #22

Earlier quoted context omitted.

Tell us a bit more about Tailwind. Last I looked at it a few years ago it seemed a conglomeration of antipatterns. Quick googling is not convincing. Assume that I know _nothing_ about Tailwind, sell it to me. I'd appreciate it. Thanks.

Since you use the term "antipattern," what is the respectable pattern (methodology) that Tailwind stands opposed to?

Semantic classes.

Re: Critical CSS? Not So Fast

#38

Post by pbowyer »

danielvaughn wrote: post #36
christophilus wrote: post #28

Earlier quoted context omitted.

Been developing websites and apps since the days when we are worrying about the y2k bug. Tailwind is my favorite thing. Almost everything that I disliked about CSS is solved by it. Once you really kick the tires, you become way more productive: Naming is hard. No more naming. Switching between your markup and your CSS added friction to your flow. No more friction. Avoiding problems caused by overly aggressive rules /…

I feel the same way about Tailwind, but haven't taken the plunge on Tailwind UI. Though I kinda want to buy it just to support the team. Do you feel like it constrains you too much, or no?

> Though I kinda want to buy it just to support the team.

That's kind but they have earned shedloads already (over $2m USD as of Jan 2021 [1]). That's on top of the $2.3m for the Refactoring UI ebook [2].

1. https://www.smalltechbusiness.com/monetizing-open-source-tai...

2. https://twitter.com/adamwathan/status/1289702466754211842

Re: Critical CSS? Not So Fast

#39

Post by danielvaughn »

karlmdavis wrote: post #27
troysk wrote: post #11

I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering. The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/ . And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/ . The easiest way to gen…

“It helps build fast rendering sites, sometimes even sub-second renders…” That has to be a typo, right? Or sarcasm? I weep for what we’ve all done to the beautiful speed and simplicity of the web.

I don't think it's a typo - a sub-second render on a modern website with all the bells and whistles that users now expect...that probably puts you in the 99th percentile, maybe even higher.

Not disagreeing with you though - it's amazing how much bloat we've added. Nobody seems to get just how fucking fast the web actually is. Take a look at Figma or Linear if you want to see products that truly care about performance.

Re: Critical CSS? Not So Fast

#40

Post by danielvaughn »

pbowyer wrote: post #38
danielvaughn wrote: post #36

Earlier quoted context omitted.

I feel the same way about Tailwind, but haven't taken the plunge on Tailwind UI. Though I kinda want to buy it just to support the team. Do you feel like it constrains you too much, or no?

> Though I kinda want to buy it just to support the team. That's kind but they have earned shedloads already (over $2m USD as of Jan 2021 [1]). That's on top of the $2.3m for the Refactoring UI ebook [2]. 1. https://www.smalltechbusiness.com/monetizing-open-source-tai... 2. https://twitter.com/adamwathan/status/1289702466754211842

Ha, fair enough. Though now I'm aware of the book and kinda want to buy it :p
Post reply on HN