My new favorite reset is this one: https://elad2412.github.io/the-new-css-reset/ https://elad2412.github.io/the-new-css-reset/ Here's a great interview with th

My new favorite reset is this one: https://elad2412.github.io/the-new-css-reset/ https://elad2412.github.io/the-new-css-reset/ Here's a great interview with the author on CSS Tricks that explains some of the design choices in depth (this is where I first came across it): https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/ https://css-tricks.com/an-interview-with-elad-shechter-on-th... TL;DR: This rule does most of the heavy lifting and is the most novel aspect of this approach: /\* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ *:where(:not(iframe, canvas, img, svg, video):not(svg \*)) { all: unset; display: revert; } It practically wipes out all styling from user agents across the board, so you will never again need to exhaustively override every undesirable user agent style to get an element to look exactly the way you want. The styles you've placed on an element explicitly become (for the most part) the only things that will contribute to its appearance. I've been prototyping with it at https://app.reflame.dev/ https://app.reflame.dev/ and it honestly feels like a breath of fresh air in terms of productivity. One thing I've learned to watch out for when using it, is that it also happens to wipe out the default focus state styles of interactive elements like button, anchor, etc (the blue outline in Chrome). This is the reset working as intended, but it's also a show-stopping accessibility issue if not properly addressed in userland by adding some form of visual focus indicator back in. I have a feeling we might discover more gotcha's like this as time goes on, but so far this is the only one I've noticed, and as a result I've been very happy with the tradeoff.