the * selector
* {border: 1px dotted black;}
behold: the "select all" selector. super helpful to be able to slap a border on everything when i'm building a layout.
box-sizing
* {box-sizing: border-box;}
makes sizing things way more straightforward because it'll measure starting at the border and not the content.
backdrop-filter
.example {backdrop-filter: blur(5px);}
this is how i get the frosted glass effect that i love so much, but you can do a lot of things other than blur if you want - see the MDN page.
aspect-ratio
.example {aspect-ratio: 1/1;}
want a square? you got a square. or any other ratio you like. useful if you want things to resize nicely on smaller screens.
display: contents
a {display: contents;}
suppose you've made a collage and you want to make part of it into a link, so you wrap it in an <a> tag and it suddenly breaks your whole layout, leading you into about an hour of desperate frustration giggles until you finally find the right StackOverflow post. yeah. this solves the problem. god bless.