Post

As a library developer the * selector has always been problematic. It basically forces you to override every commonly used CSS prop in your component. I've ran into customers having `* { transition: all .25s }` in their stylesheet. 🫠 Luckily nowadays we have `shadowRoot` and `unset`.

Happy to be a bit weird and only use `box-sizing` when I actually have a component that benefits from changing the defaults. Which is pretty rare. `* { … }` never sat right with me ¯\_(ツ)_/¯

I just realized how your last two pieces of content relates: using `stretch` totally reduces the need to use `box-sizing: border-box`.

Totally! It probably depends some on the things you're doing, but even efficient use of grid/flex right now, you might find that it's rarely (if ever) needed.

I've been using border-box on * for so long that I have to actively remind myself it's not the default when I work on a foreign codebase.

I just don't use the `border-box` reset. Because at the end of the day, I rarely ever set widths explicitly on anything and without that, the `margin`, `border`, `padding` get subtracted from the available space regardless of `box-sizing`.

TIL! 😳