CSS tricks I actually use

There’s no shortage of CSS tips online — but not all of them make it into real projects. These are the ones I keep coming back to. They’re small, reliable, and save time in everyday work.

1. Centering with place-items: center

Need to center content in a full-page layout? You don’t need Flexbox every time.

Tip: Use display: grid and place-items: center — it centers both horizontally and vertically in one line.

2. Quickly hiding elements with display: contents

Sometimes you need to remove a wrapper visually but keep its children in the DOM flow — for grids, for example.

Tip: display: contents makes the element disappear visually, but its children stay as-is. Just be careful — it can break accessibility if misused.

3. Clamping font sizes for better scaling

Fixed font sizes don’t adapt well across screen sizes. But clamp() gives you control and flexibility.

Tip: Use clamp(1rem, 2vw, 1.5rem) to let font size grow responsively but stay within bounds.

4. Using :is() to simplify selectors

Tired of repeating long class chains just to target similar elements?

Tip: :is(h1, h2, h3) lets you group selectors in a cleaner way. Works great for global heading styles, navigation lists, or cards.

5. Adding spacing without last-child hacks

No more :not(:last-child) tricks just to space out items.

Tip: Use gap with Flexbox or Grid — it’s cleaner and works on rows and columns.

Final thoughts

You don’t need hundreds of CSS tricks to write good styles — just a few that actually solve real problems. These ones make my code cleaner, my layouts tighter, and my life easier.