Ultimate Guide to Modern CSS Tricks & Additions (2025 Edition)

1. Container Queries (responsive to parent containers, not just viewport)

With the rise of component-based design, it’s no longer enough to query only the viewport size. Container Queries let you apply styles based on the size of a container element.

.card {
  container-type: inline-size;
}
@container (min-width: 500px) {
  .card-content {
    display: flex;
    gap: 1rem;
  }
}
    

2. Cascade Layers (organise your CSS and tame specificity)

The @layer at-rule lets you define distinct “layers” in the cascade (e.g., reset, base, components, utilities) and control overriding order in a predictable way.

@layer reset {
  /* resets here */
}
@layer base {
  body { font: 16px/1.5 sans-serif; }
}
@layer components {
  .btn { padding: .5rem 1rem; }
}
    

3. Relative Colour Syntax & New Colour Spaces

Colour in CSS is getting smarter. With relative colour syntax (adjusting an existing colour) and new colour spaces like OKLCH / OKLAB, you can create more perceptually accurate palettes.

.element {
  background: oklch(55% 0.2 220);
  color: color(srgb 1 1 1 / 0.8);
}
.dark-theme {
  color: color(srgb 1 1 1 / 0.9);
}
    

4. Advanced Selectors & Parent-State Styles

The :has() parent selector lets you style an element based on whether it contains a certain child. This opens up possibilities previously forced into JavaScript.

/* Example: style a form label when the input inside it is filled */
label:has(input:not(:placeholder-shown)) {
  font-weight: bold;
}
    

5. Performance-friendly Layout Tools

Features like content-visibility and scrollbar-gutter help improve rendering performance and avoid layout shifts.

.lazy-load-section {
  content-visibility: auto;
}
.scrollable {
  scrollbar-gutter: stable both-edges;
}
    

6. Nesting & Scoped Styles (cleaner authoring)

The @scope rule lets you define styles that only apply within a certain DOM subtree. This helps localise styles and keep them modular.

@scope (#widget) {
  & h2 {
    color: darkblue;
  }
  & p {
    margin-bottom: 1rem;
  }
}
    

7. Logical Properties & Multi-Value Display

Logical properties (like margin-block-start, padding-inline-end) and multi-value display (e.g., display: block flow) make layouts better suited for internationalisation and flexible writing-modes.

8. Scroll Snap & Scroll Behaviour Enhancements

With scroll-snap and new behaviours you can create carousels, galleries or scrollable modules with fine control and less JS.

.container {
  scroll-snap-type: x mandatory;
}
.container > * {
  scroll-snap-align: start;
}
    

9. Subgrid & Grid Layout Refinements

The subgrid value of CSS Grid allows nested grids to inherit the tracks of the parent grid—great for complex layouts without extra wrappers.

10. Viewport & Container Units & Fluid Typography

New units (e.g., cqw/cqh for container width/height) and fluid typography techniques let you set font-size or spacing relative to parent containers rather than the viewport.