CSS Tips and Tricks

Modern CSS has evolved significantly over the past few years, introducing powerful features that simplify complex layout challenges. In this post, we’ll explore some practical techniques you can use in your projects today.

Flexbox vs Grid: When to Use Which

Flexbox excels at one-dimensional layouts — arranging items in a row or column. It’s perfect for navigation bars, card rows, and centering content. Grid, on the other hand, shines when you need two-dimensional control over both rows and columns simultaneously.

A good rule of thumb: use Flexbox for components and Grid for page layouts. Of course, they work beautifully together too.

Container Queries

Container queries allow you to style elements based on the size of their container rather than the viewport. This is a game-changer for creating truly reusable components that adapt to wherever they’re placed in your layout.

The :has() Selector

Often called the “parent selector,” :has() lets you style an element based on its children or siblings. This opens up styling possibilities that previously required JavaScript.

Custom Properties for Theming

CSS custom properties (variables) make theming straightforward. Define your color palette, spacing scale, and typography values as custom properties on :root, then reference them throughout your stylesheet. Changing themes becomes as simple as updating a few variable values.

Scroll-Driven Animations

One of the newest additions to CSS is scroll-driven animations. You can now create parallax effects, progress indicators, and reveal animations purely with CSS — no JavaScript libraries needed.

Wrapping Up

The CSS landscape continues to improve rapidly. By adopting these modern techniques, you can write cleaner, more maintainable stylesheets while delivering better user experiences.