Nesting and layers in CSS

Two modern additions: nested rules, and cascade layers for ordering.

@layer reset, base, components;

@layer components {
  .card {
    padding: 1rem;

    & .title {
      font-weight: 600;
    }

    &:hover {
      background: #14161c;
    }

    @media (width >= 48rem) {
      padding: 1.5rem;
    }
  }
}

How it works

1. & refers to the parent selector inside a nested rule.
2. A nested media query keeps the breakpoint next to the rule.
3. @layer orders whole blocks regardless of specificity.

Keywords and builtins used here

• background
• card
• layer
• media
• padding
• rem

The run, in numbers

Lines

19

Characters to type

191

Tokens

60

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 40 seconds.

Type this snippet

Step 2 of 2 in Generated content, step 20 of 21 in Responsive & modern CSS.

← Previous Next →