Native CSS Nesting#

This was the killer feature of Sass. Now it’s just… CSS.

1
.card {
2
  padding: 1rem;
3
  background: white;
4

5
  &:hover {
6
    background: #f5f5f5;
7
  }
8

9
  .header {
10
    font-size: 1.25rem;
11
    font-weight: 600;
12
  }
13

14
  @media (min-width: 768px) {
15
    padding: 2rem;
16
  }
17
}

The & selector works exactly like you’d expect from Sass. Media queries can be nested inside selectors. No build step required.

Browser support: 95%+ (all modern browsers)

TIP

If you’re using a preprocessor solely for nesting, you might not need it anymore. Native nesting has excellent support and reduces your build complexity.

The @scope Rule#

This is the feature CSS developers have wanted for decades: real scoping without CSS Modules, CSS-in-JS, or BEM naming conventions.

1
@scope (.card) {
2
  h2 {
3
    font-size: 1.5rem;
4
    color: var(--heading-color);
5
  }
6

7
  button {
8
    background: var(--primary);
9
    border: none;
10
    padding: 0.5rem 1rem;
11
  }
12
}

Selectors inside @scope can only match elements within the scoping root. The h2 styles won’t leak to other parts of your page. It’s component-scoped CSS without any tooling.

You can even define scope boundaries:

1
@scope (.card) to (.card-footer) {
2
  /* Styles apply to .card but stop at .card-footer */
3
  p {
4
    margin-bottom: 1rem;
5
  }
6
}

Browser support: ~80% and improving rapidly

Container Queries#

Media queries ask: “How wide is the viewport?” Container queries ask: “How wide is this component’s container?”

1
.card {
2
  container-type: inline-size;
3
}
4

5
@container (min-width: 400px) {
6
  .card-content {
7
    display: grid;
8
    grid-template-columns: 1fr 1fr;
9
  }
10
}
11

12
@container (min-width: 600px) {
13
  .card-content {
14
    grid-template-columns: 1fr 2fr;
15
  }
16
}

This enables truly responsive components. Your card component adapts to its container whether it’s in a sidebar, a modal, or a full-width section—no JavaScript required.

Browser support: 92%+

IMPORTANT

Container queries are a game-changer for component-based architectures. Components become portable and responsive to their context, not just the viewport.

CSS Custom Properties with @property#

CSS variables (--my-var) have been around for a while. But @property makes them typed and animatable:

1
@property --primary-color {
2
  syntax: '<color>';
3
  initial-value: #3366cc;
4
  inherits: false;
5
}
6

7
@property --rotation {
8
  syntax: '<angle>';
9
  initial-value: 0deg;
10
  inherits: false;
11
}
12

13
.button {
14
  background: var(--primary-color);
15
  transition: --primary-color 0.3s ease;
16
}
17

18
.button:hover {
19
  --primary-color: #0044aa;
20
}
21

22
.spinner {
23
  transform: rotate(var(--rotation));
24
  animation: spin 1s linear infinite;
25
}
26

27
@keyframes spin {
28
  to { --rotation: 360deg; }
29
}

Before @property, you couldn’t animate CSS variables—they’d just snap between values. Now they interpolate smoothly.

Browser support: 85%+

Cascade Layers (@layer)#

Specificity wars are over. Cascade layers give you explicit control:

1
@layer reset, base, components, utilities;
2

3
@layer reset {
4
  * {
5
    margin: 0;
6
    padding: 0;
7
    box-sizing: border-box;
8
  }
9
}
10

11
@layer base {
12
  body {
13
    font-family: system-ui, sans-serif;
14
    line-height: 1.6;
15
  }
16
}
17

18
@layer components {
19
  .button {
20
    padding: 0.5rem 1rem;
21
    border-radius: 4px;
22
  }
23
}
24

25
@layer utilities {
26
  .text-center { text-align: center; }
27
  .hidden { display: none; }
28
}

Layers declared later always win over earlier layers, regardless of selector specificity. No more !important battles.

Browser support: 95%+

Feature Detection with @supports#

Test for feature support before using it:

1
/* Only apply if the browser supports the feature */
2
@supports (interpolate-size: allow-keywords) {
3
  :root {
4
    interpolate-size: allow-keywords;
5
  }
6

7
  details::details-content {
8
    transition: height 0.3s ease;
9
    height: 0;
10
    overflow: clip;
11
  }
12

13
  details[open]::details-content {
14
    height: auto;
15
  }
16
}
17

18
/* Fallback for browsers without support */
19
@supports not (container-type: inline-size) {
20
  .card-content {
21
    /* Use media queries as fallback */
22
    @media (min-width: 400px) {
23
      display: grid;
24
    }
25
  }
26
}

This is progressive enhancement done right. Use cutting-edge features where supported, provide fallbacks where not.

Browser support: 98%+

The if() Function#

CSS now has conditionals:

1
.element {
2
  color: if(prefers-color-scheme(dark), white, black);
3
  padding: if(supports(gap), 0, 0.5rem);
4
}

This eliminates many media queries and simplifies conditional styling.

Browser support: Still emerging (check caniuse.com)

Native Masonry Layouts#

No more JavaScript libraries for masonry:

1
.gallery {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4
  masonry-auto-flow: column;
5
}

Browser support: ~70% (check caniuse.com for current status)

Modern Selectors#

CSS selectors have gotten much more powerful:

1
/* Cards that contain images */
2
.card:has(img) {
3
  padding: 0;
4
}
5

6
/* Form groups with invalid inputs */
7
.form-group:has(:invalid) {
8
  border-color: red;
9
}
10

11
/* Navigation with dropdown open */
12
nav:has(.dropdown.open) {
13
  z-index: 100;
14
}

1
/* Instead of this */
2
.card h1, .card h2, .card h3,
3
.panel h1, .panel h2, .panel h3 {
4
  margin-bottom: 1rem;
5
}
6

7
/* Write this */
8
:is(.card, .panel) :is(h1, h2, h3) {
9
  margin-bottom: 1rem;
10
}
11

12
/* :where() has zero specificity */
13
:where(.card, .panel) h1 {
14
  /* Easily overridable */
15
}

Practical Example: Details Element Animation#

Here’s a real-world example combining several modern features to create smooth accordion animations:

1
@supports (interpolate-size: allow-keywords) {
2
  :root {
3
    interpolate-size: allow-keywords;
4
  }
5

6
  details {
7
    border: 1px solid var(--border-color);
8
    border-radius: 8px;
9
    overflow: hidden;
10

11
    &::details-content {
12
      transition:
13
        height 0.3s ease,
14
        content-visibility 0.3s ease allow-discrete;
15
      height: 0;
16
      overflow: clip;
17
    }
18

19
    &[open]::details-content {
20
      height: auto;
21
    }
22

23
    & summary {
24
      padding: 1rem;
25
      cursor: pointer;
26

27
      &:hover {
28
        background: var(--hover-bg);
29
      }
30
    }
31
  }
32
}

This creates a smooth height transition for accordion content using pure CSS—no JavaScript required.

What This Means for Preprocessors#

Many features that justified using Sass, Less, or Stylus are now native:

This doesn’t mean preprocessors are dead. They still offer:

• Mixins for complex reusable patterns
• Loops for generating repetitive code
• Build-time compilation for zero-runtime overhead

But for many projects, native CSS is now sufficient.

Previous in this series: My Hybrid CSS Approach: Tailwind + Native CSS — Why I use both Tailwind and native CSS.

Next in this series: Why I Hate Using StyleX at Work — A critical look at CSS-in-JS constraints and what to look for in CSS tools.

Resources#

• MDN: CSS Nesting
• MDN: @scope
• MDN: Container Queries
• MDN: @property
• W3C: CSS Cascade Layers
• CSS Author: Best CSS Preprocessor Tools