3 ms·

> 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 Tailwi

> 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.

Gualdrapo 4y ago
> 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.
- azangru 4y ago
  > 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?
dtagames 4y ago
Indeed. It's web components and the shadow DOM that fix all of this.
dxchester 4y ago
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-small-subset-of-tailwind-css https://frameable.com/company/tech/how-we-found-sanity-in-a-...
- jacobr 4y ago
  Great post. It's similar to CUBE, https://cube.fyi https://cube.fyi and the creator of CUBE even wrote about using "Tailwind as the U in CUBE"
alwillis 4y ago
There’s also no mention of CSS Cascade Layers [1]. [1]: https://css-tricks.com/css-cascade-layers/ https://css-tricks.com/css-cascade-layers/
- tln 4y ago
  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-css/#:~:text=It%E2%80%99s%20worth%20noting%20that%20CSS%20cascade%20layers%20is%20an%20up%2Dand%2Dcoming%20feature%20that%20can%20help%20address%20this%20problem%20natively https://frontendmastery.com/posts/the-evolution-of-scalable-....

Gualdrapo 4y ago

> 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.

azangru 4y ago
> 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?

dtagames 4y ago

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

dxchester 4y ago

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-small-subset-of-tailwind-css https://frameable.com/company/tech/how-we-found-sanity-in-a-...

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

alwillis 4y ago

There’s also no mention of CSS Cascade Layers [1]. [1]: https://css-tricks.com/css-cascade-layers/ https://css-tricks.com/css-cascade-layers/

tln 4y ago
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-css/#:~:text=It%E2%80%99s%20worth%20noting%20that%20CSS%20cascade%20layers%20is%20an%20up%2Dand%2Dcoming%20feature%20that%20can%20help%20address%20this%20problem%20natively https://frontendmastery.com/posts/the-evolution-of-scalable-....