Hacker News Reader

Comment by azangru | Hacker News Reader

> The Evolution of Scalable CSS

The evolution of practices described in this article is followed up to about ten yeas ago... and then stops, followed by Tailwind. Where is consideration of web components with shadow DOM, which solve the CSS encapsulation problem, the naming problem, and the dead code problem? Where is treatment of CSS variables that pierce the shadow DOM and allow global theming of such components? They are the next step in the evolution of scalable CSS, and yet they are noticeably absent from the discussion.

View on HN

We wrote about our journey[0] to sanity after Tailwind:

The answer is to do it all in strategic moderation: Use a subset of tailwind just for spacing and layout and revel in simple things being simple. Use modular CSS for UI patterns and revel in the readability of your HTML and visual consistency of your UI. And then use custom scoped CSS where required, and revel in interesting things being only as hard as need be, without ruining everything else along the way.

[0]: https://frameable.com/company/tech/how-we-found-sanity-in-a-...

Great post. It's similar to CUBE, https://cube.fyi and the creator of CUBE even wrote about using "Tailwind as the U in CUBE"

> Where is treatment of CSS variables that pierce the shadow DOM and allow global theming of such components?

I feel like, at least with that one, was left behind because there's some work left to do in that regard.

For the redesign of my portfolio, miler.codeberg.page, I used icons I did for the previous one (and did some new ones, but all are a bunch of <symbol>s in a single file) but instead of "injecting" the SVG code in the HTML I tried to use them from CSS as pseudoelements (as a 'content' fragment identifier) and style them (stroke color).

The state of things right now, as I learned, is that it's impossible to do that - neither with some obscure parameter within the SVG fragment identifiers. I had to do some crop filter trickery to "change" their stroke color.

> I tried to use them from CSS as pseudoelements (as a 'content' fragment identifier) and style them (stroke color).

Isn't this just the general problem of loading an svg as an image via a link as opposed to injecting it into the DOM as inline svg? How would any of the existing CSS approaches help (or how would web components hider) this one?

Indeed. It's web components and the shadow DOM that fix all of this.

There’s also no mention of CSS Cascade Layers [1].

[1]: https://css-tricks.com/css-cascade-layers/

The article does mention them... I'm just finding out about this, it could be very useful!

https://frontendmastery.com/posts/the-evolution-of-scalable-....

Reply on news.ycombinator.com