20 CSS Tricks Every Web Developer Should Know in 2026

CSS has evolved dramatically in recent years. Features that once required JavaScript or complex workarounds are now achievable with pure CSS. Whether you are a beginner who wants to level up or an experienced developer who wants to brush up on modern techniques, these 20 CSS tricks will make your code cleaner, faster, and more impressive.

1. CSS Custom Properties (Variables)

Store repeated values in variables to make your styles consistent and easy to update.

:root { –primary-color: #3b82f6; –font-size-base: 16px; }

button { background-color: var(–primary-color); }

2. Clamp() for Responsive Typography

Make font sizes scale smoothly between a minimum and maximum without media queries.

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

3. CSS Grid for Two-Dimensional Layouts

Grid is the most powerful layout tool in CSS. Use it whenever you need both row and column control.

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }

4. Flexbox for One-Dimensional Layouts

Use Flexbox for aligning items in a single direction — perfect for navigation bars, card rows, and centring elements.

.center { display: flex; justify-content: center; align-items: center; }

5. The :is() Pseudo-Class

Simplify complex selectors and reduce repetition.

Instead of: h1 a, h2 a, h3 a { color: blue; } Write: :is(h1, h2, h3) a { color: blue; }

6. Aspect Ratio Property

Maintain consistent proportions for images, videos, and cards without padding hacks.

.video-container { aspect-ratio: 16 / 9; } .square-card { aspect-ratio: 1; }

7. CSS Scroll Snap

Create smooth, controlled scrolling experiences for carousels and sections.

.scroll-container { scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; }

.scroll-item { scroll-snap-align: start; }

8. Sticky Positioning

Create elements that stick to the top of the viewport while scrolling without JavaScript.

.header { position: sticky; top: 0; z-index: 100; }

9. CSS Logical Properties

Use logical properties for better internationalisation — they adapt automatically for right-to-left languages.

.element { margin-inline: auto; padding-block: 1rem; }

10. The gap Property on Flexbox

Add spacing between flex items without margin tricks.

.nav { display: flex; gap: 1rem; }

11. Container Queries

Style elements based on their parent container size, not just the viewport. This is a game-changer for reusable components.

.card-container { container-type: inline-size; }

@container (min-width: 400px) { .card { flex-direction: row; } }

12. CSS :has() Selector

Style a parent element based on its children — something previously impossible in pure CSS.

form:has(input:invalid) { border-color: red; }

13. Object-Fit for Images

Control how images fill their containers — like background-size but for img elements.

img { width: 100%; height: 300px; object-fit: cover; object-position: center; }

14. CSS Animation with Prefers-Reduced-Motion

Respect users who prefer less motion — always pair animations with this media query.

@media (prefers-reduced-motion: no-preference) { .element { animation: fadeIn 0.3s ease; } }

15. The min() and max() Functions

Set dynamic constraints on widths and sizes.

.container { width: min(90%, 1200px); } .sidebar { width: max(200px, 25%); }

16. CSS Subgrid

Allow nested grid items to align with the parent grid — now widely supported in 2026.

.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; } .child { display: grid; grid-column: span 3; grid-template-columns: subgrid; }

17. Smooth Scrolling

Enable smooth scroll behaviour site-wide with a single line.

html { scroll-behavior: smooth; }

18. CSS Nesting

Native CSS nesting is now supported in all modern browsers — no preprocessor needed.

.button { background: blue;

&:hover { background: darkblue; } &.disabled { opacity: 0.5; } }

19. Text Wrapping with Balance

Prevent awkward single-word lines in headings.

h1, h2, h3 { text-wrap: balance; }

20. The Writing Mode Property

Create vertical text for design effects or international layouts.

.vertical-text { writing-mode: vertical-rl; }

Final Thoughts

Modern CSS is more powerful than most developers realise. Many of these features have only reached full browser support in the past two years, so even experienced developers may have missed some of them. Start incorporating these techniques into your next project and you will write less code while achieving better results.