No hot takes here. Just CSS I actually use.
clamp() for Fluid Type
``css font-size: clamp(1rem, 2.5vw, 1.25rem); ``
One line replaces a whole set of media queries for font sizing. The browser handles the interpolation between your minimum and maximum. I use it for every heading size on every project now.
Logical Properties
``css margin-inline: auto; padding-block: 2rem; ``
margin-inline: auto centres a block element without touching top/bottom margin. padding-block sets top and bottom padding together. Once you start using these you won't go back to spelling out all four sides.
gap in Flexbox
Flexbox gap has been supported everywhere for a few years now and I still see codebases using negative margins to space flex children. Just use gap. It's cleaner, it doesn't require a reset hack, and it works exactly like you'd expect.
aspect-ratio
``css .card-image { aspect-ratio: 16 / 9; } ``
Intrinsic sizing for images and embeds. No more padding-top percentage hacks. The image fills the container and the container keeps its shape.
:is() for Grouped Selectors
``css :is(h1, h2, h3) a { ... } ``
Much cleaner than writing three separate selectors. The specificity takes the highest-specificity argument in the list, which is something to know about but rarely matters in practice.
Custom Properties on :root
Not a trick — just a practice. Every project gets a :root block with colour tokens, spacing scale, and font stacks as custom properties. Changing the theme means changing one block, not hunting through stylesheets.