Comments on: Reminder that @scope and HTML style blocks are a potent combo

By: Rodrigo

Rodrigo — Tue, 12 Nov 2024 14:31:18 +0000

In reply to Zach Saucier. For the test i've done you can just use and have it load the css only once and as a bonus you only have to make changes in one place.

By: Coop Coding

Coop Coding — Thu, 10 Oct 2024 03:26:40 +0000

Also one small caveat is that vscode doesn’t currently support intellisense for it: https://github.com/microsoft/vscode-css-languageservice/issues/406

By: Ben

Ben — Tue, 08 Oct 2024 03:06:08 +0000

This sounds pretty interesting but I realise that we kind of have at least part of this since the beginning of CSS, and forgot it maybe? If we simply put a style attribute in the <div />, our border applies as well. And anything that would cascade down. It doesn't cover tag selectors or classes of course but defining those "local" styles as overrides under a specific class that we would add to the initial <div /> would also do the trick. Seems like a solution to a non-existing problem to me.

By: Chris Coyier

Chris Coyier — Mon, 07 Oct 2024 18:28:06 +0000

In reply to Zach Saucier.

HTML file size and DOM size yeah… I could see that being a tradeoff to deal with there, possibly one that makes this a stow stopper is some situations. The caching of a CSS file is a beautiful thing.

I feel like if we’re comparing it to slapping styles into runtime JavaScript though, this has still gotta win right?

By: Zach Saucier

Zach Saucier — Mon, 07 Oct 2024 18:18:33 +0000

Wouldn’t this be not so great in terms of file size since it requires the style tag and CSS be included every time this “component” is used? So for an element that only appears once or items above the fold that you want to render immediately this technique would be great but for most components it would be more file size intensive, right?