DEV Community

Cover image for How to Write CSS in 2025 – Modern Features You Should Be Using (with examples)
Almaz Bisenbaev
Almaz Bisenbaev

Posted on

How to Write CSS in 2025 – Modern Features You Should Be Using (with examples)

#css #frontend #webdev

CSS has come a long way. If you're still relying only on floats and basic media queries, you're missing out. Let's explore how to write much better, more powerful CSS today using features that are now widely available.

1. Subgrid (90% support)

Perfect for nested layouts where child elements need to align with the parent grid (card layouts, nested forms, or dashboards where alignment matters).

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: subgrid;
  grid-column: span 2;
}
Enter fullscreen mode Exit fullscreen mode

2. Nesting (90% suport)

Yep, no more Sass for basic nesting. Native CSS nesting lets you group related styles, reduce repetition, and improve readability, without preprocessors.

.card {
  padding: 1rem;

  &:hover {
    background: #f0f0f0;
  }

  .title {
    font-weight: bold;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Container Queries (86% support)

Style components based on their container’s size, not the viewport. This makes your components truly responsive and reusable.

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

@container (min-width: 600px) {
  .card-content {
    display: flex;
  }
}
Enter fullscreen mode Exit fullscreen mode

4. :has() (92% support)

This is the holy grail of CSS - a parent selector. It enables conditional styling based on child elements, something that was impossible until now.

.card:has(img) {
  border: 1px solid purple;
}
Enter fullscreen mode Exit fullscreen mode

5. :focus-within (95% support)

Highlight form groups when any child is focused.

.form-group:focus-within {
  outline: 2px solid #7f5af0;
}
Enter fullscreen mode Exit fullscreen mode

6. @layer (94% support)

Tired of specificity wars? CSS layers (@layer) give you explicit control over which styles override others. Ideal for large codebases, design systems, or when using multiple CSS sources.

@layer base, components, utilities;

@layer base {
  body {
    margin: 0;
  }
}

@layer components {
  .btn {
    padding: 0.5rem 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

Sooo...

Modern CSS is modular, scalable and intelligent. You can build responsive components without JavaScript, write cleaner code without preprocessors and manage specificity with precision.

Top comments (0)