FullStack Course LogoFullStack Course
Module: CSS
CSS·041·11 MIN READ

041: Modern CSS — Cascade Layers, Nesting, Scope, Subgrid, Logical Properties, and Progressive Features

TOPICS COVERED: Modern CSS — Cascade Layers, Nesting, Scope, Subgrid, Logical Properties, and Progressive Features

Learning outcomes

By the end of this lesson, you should be able to use cascade layers to make precedence intentional, write native nesting without creating deep selector coupling, explain and use @scope where browser support allows it, align repeated card content with subgrid, and choose logical properties when writing-mode resilience matters. You will also have a practical way to adopt newer CSS features through progressive enhancement rather than treating novelty as a requirement.

Prerequisites and retrieval

Before starting, retrieve the cascade and specificity model from 020, the Grid model from 029, CSS architecture from 039, and compatibility planning from 040. Those earlier ideas are the foundation for deciding when a modern feature actually makes a stylesheet easier to maintain.

Cascade layers

When a stylesheet has reset rules, a vendor package, components, and utilities competing with one another, selector specificity is often the wrong tool for establishing ownership. Cascade layers let you declare those priority zones directly:

css
@layer reset, base, theme, components, utilities;

Once the order exists, put rules into the appropriate layer:

css
@layer base {
  a {
    color: #2563eb;
  }
}

@layer components {
  .button {
    color: white;
    background: #2563eb;
  }
}

@layer utilities {
  .text-danger {
    color: #b91c1c;
  }
}

The browser resolves layer order before it compares selector specificity within a layer. That gives the architecture a stable precedence rule: a later layer can intentionally outrank an earlier layer without requiring an increasingly aggressive selector. It is especially useful when third-party CSS is present, because you can establish your relationship to that CSS instead of trying to win every specificity contest individually.

Third-party example

css
@layer reset, vendor, base, components, utilities;

@import url("vendor.css") layer(vendor);

With this order, your later layers can outrank normal declarations from the vendor layer without copying the vendor selector or matching its specificity. Layers do not make specificity disappear; they give you another cascade decision that is evaluated before specificity.

Native nesting

Native nesting keeps closely related rules near the component they describe. This example puts the component's default style, title, hover state, and responsive adjustment together:

css
.card {
  padding: 1rem;
  border: 1px solid #cbd5e1;

  & .card__title {
    margin: 0;
  }

  &:hover {
    border-color: #94a3b8;
  }

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

The benefit is locality, not permission to make the selector tree deeper. Nesting can recreate the old Sass problem if each descendant depends on the exact DOM path above it. A refactor then becomes risky because moving one element changes the selector that styles it.

Avoid coupling a title to a chain of remote ancestors:

css
.page {
  .main {
    .dashboard {
      .panel {
        .title {
          /* too coupled */
        }
      }
    }
  }
}

Prefer a component-owned name when the title belongs to the panel:

css
.panel__title { ... }

The useful boundary is the component's ownership. Nest a state, media query, or small related selector when that improves readability; do not turn the document structure into the component's API.

Scope

@scope lets a rule match within a bounded subtree without repeating the same wrapper in every selector. That is valuable for content regions where styling semantic elements directly is clearer than inventing a class for every heading and link.

Conceptual example:

css
@scope (.article) {
  h2 {
    margin-block-start: 2em;
  }

  a {
    text-decoration-thickness: 0.12em;
  }
}

The rules apply within .article, rather than globally changing every h2 and a on the page. Depending on the syntax and browser support involved, a scope can also specify an upper boundary. Check the exact supported form before relying on that behavior.

Use scope for a local styling domain, particularly a prose or article region. Do not confuse it with Shadow DOM: @scope affects CSS matching and cascade boundaries, while Shadow DOM creates a separate DOM tree with its own encapsulation behavior.

Logical properties

Physical properties assume that the page's meaningful inline direction is always left to right. That assumption is visible in code like this:

css
.card {
  margin-left: 1rem;
  padding-right: 2rem;
  border-left: 4px solid blue;
}

Logical properties describe the inline and block axes instead:

css
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
  border-inline-start: 4px solid blue;
}

The browser maps logical properties to physical edges using the element's writing mode and direction. The rule therefore expresses intent, such as “start-side spacing,” rather than encoding one particular left-to-right horizontal layout.

High-value pairs include:

  • inline-size / block-size
  • min-inline-size / max-inline-size
  • margin-inline / margin-block
  • padding-inline / padding-block
  • inset-inline-start / inset-block-start
  • border-inline-start

Worked example: notification that supports direction

css
.notice {
  padding: 1rem;
  border-inline-start: 4px solid #2563eb;
  margin-inline: auto;
  max-inline-size: 42rem;
}

The accent stays on the inline-start edge, and the element remains centered with an inline margin. No separate left/right override is needed merely to mirror the accent edge in an RTL layout.

Writing mode and direction

Writing mode changes the axes that logical properties refer to. For example:

css
.vertical-label {
  writing-mode: vertical-rl;
}

Direction is a semantic fact about the document, so it should normally come from the document language and HTML directionality, such as dir, rather than being forced with CSS across an entire content region. CSS direction has legitimate uses, but the markup is the right place to communicate the reading direction.

Subgrid

Suppose a grid contains cards whose titles and actions should line up even when the body text has different lengths. The parent establishes the columns:

css
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Cards that need aligned internal rows can participate in the parent's row tracks:

css
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Each card joins the parent tracks, so titles, body content, and actions can align across separate cards. Without subgrid, each card's internal grid calculates its rows independently, and a longer paragraph in one card can push its action away from the corresponding actions in neighboring cards.

Worked example

html
<div class="plans">
  <article class="plan">
    <h2>Starter</h2>
    <p>For individuals.</p>
    <a href="/starter">Choose</a>
  </article>
  <article class="plan">
    <h2>Professional</h2>
    <p>For teams that need reporting and shared workspaces.</p>
    <a href="/pro">Choose</a>
  </article>
</div>
css
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: auto;
  gap: 1rem;
}

.plan {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0.75rem;
}

Here the markup gives each plan the same three logical pieces, and the CSS lets those pieces use shared row tracks. Test current browser support for the exact behavior your project needs; support for a feature in general is not a guarantee that every related detail has the same support.

Modern color helpers

Modern color functions can derive a variant without hard-coding another color. For example, where support and the design system make it appropriate:

css
.button:hover {
  background: color-mix(in srgb, var(--action) 85%, black);
}

This mixes the action color with black in the sRGB color space. Treat the result as a design choice, not an accessibility guarantee: a darker or lighter mix does not automatically produce sufficient contrast. Measure the actual foreground and background pair.

Modern viewport units

Mobile browser interface changes make a full-height layout more subtle than 100vh suggests. Dynamic viewport units let the browser account for that changing viewport:

css
.hero {
  min-block-size: 100dvh;
}

dvh tracks the dynamic viewport height. svh represents the small viewport, while lvh represents the large viewport. These units can handle mobile browser UI changes more accurately than relying only on classic vh; choose among them based on whether the layout needs the current, smallest, or largest available viewport.

Feature-query adoption pattern

Progressive enhancement starts with a usable baseline:

css
.card-list {
  display: flex;
  flex-wrap: wrap;
}

Then add the newer behavior when the browser can confirm support:

css
@supports (grid-template-rows: subgrid) {
  .card-list {
    display: grid;
  }
}

The fallback is not automatically necessary. If the product's official browser baseline already supports the feature, extra fallback code may add maintenance cost without helping a real user. Progressive enhancement is a product and support decision, not ceremonial extra CSS.

Modern CSS decision rule

Before reaching for JavaScript or adding a build dependency to solve a presentation problem, check whether the platform already provides the capability:

  • custom properties;
  • :has();
  • container queries;
  • cascade layers;
  • native nesting;
  • subgrid;
  • logical properties;
  • clamp()/math functions;
  • media preference queries;
  • @supports.

That check is not an instruction to use the newest CSS by default. Platform CSS is not automatically simpler. Adopt a feature only when the team can explain it clearly and the project's support target permits it.

Perceptual color: oklch() and modern color systems

Modern CSS includes perceptual color spaces that can make lightness and chroma easier to reason about than raw channel values. A token might look like this:

css
:root {
  --brand: oklch(62% 0.18 255);
  --brand-strong: oklch(52% 0.18 255);
}

oklch() takes, in order:

  1. lightness;
  2. chroma;
  3. hue;
  4. optional alpha.

The perceptual model helps organize a palette, but it does not guarantee accessibility. Always measure contrast using the actual foreground and background pair in the interface.

Modern color features can be combined with color-mix():

css
.button:hover {
  background:
    color-mix(in oklch, var(--brand) 85%, black);
}

Use an explicit fallback whenever the browser support policy requires one. Keep the fallback intentional rather than assuming that a browser will interpret every modern color value safely.

Color scheme and automatic light/dark decisions

The color-scheme property tells the browser which schemes the page supports:

css
:root {
  color-scheme: light dark;
}

That declaration can improve native form-control and system-color rendering when the active scheme changes. Where supported, light-dark() can choose a value from the active scheme:

css
:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #0f172a);
}

For a product that offers user-selected themes, explicit semantic tokens may still communicate the design more clearly than relying only on the system preference. The browser's automatic choice is useful, but it should not obscure the application's own theme rules.

Scroll behavior and containment

Some newer properties control how scrolling behaves at component boundaries. They improve a specific interaction when used deliberately; they should not be applied as decoration.

Scroll snapping

css
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}

.carousel > * {
  scroll-snap-align: start;
}

Use snapping when the content genuinely has discrete stops, such as pages or deliberate carousel items. Test keyboard navigation, touch, trackpad input, zoom, and reduced-motion preferences. An aggressive mandatory snap must not trap users or make ordinary scrolling feel broken.

Overscroll behavior

css
.modal-body {
  overflow: auto;
  overscroll-behavior: contain;
}

This can stop scrolling inside the contained region from chaining unexpectedly to the page. It is useful for a modal body, but verify that users can still reach all content and escape the region naturally.

Stable scrollbar space

css
.page {
  scrollbar-gutter: stable;
}

Reserving stable scrollbar space can reduce layout movement when a scrollbar appears or disappears. That helps avoid a page shifting sideways during a state change, but it is still worth checking the result across the platforms your product supports.

Entry and exit transitions

An element that is newly rendered has no previous rendered style to transition from. @starting-style provides that starting value:

css
[popover] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 160ms,
    transform 160ms,
    display 160ms allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

Top-layer elements, including popovers and dialogs, are common use cases. Animation must remain optional: preserve a usable open and closed state when the feature is unsupported or the user requests reduced motion.

View transitions

The View Transition API connects JavaScript or browser navigation behavior with CSS pseudo-elements and properties. For a same-document change, JavaScript can request a transition around the DOM update:

js
document.startViewTransition(() => {
  renderNextView();
});

CSS can assign a transition name to an element:

css
.product-image {
  view-transition-name: product-image;
}

Cross-document transitions can opt in with @view-transition where that feature is supported. Treat view transitions as progressive enhancement. A user must still be able to understand state and navigation when the transition is absent, interrupted, or disabled.

CSS anchor positioning

Anchor positioning lets an absolutely positioned element stay attached to another element without manually reading that element's geometry in JavaScript. First name the anchor and reference it from the popover:

css
.help-button {
  anchor-name: --help-anchor;
}

.help-popover {
  position: absolute;
  position-anchor: --help-anchor;
  position-area: block-end span-inline-end;
}

For more direct inset calculations, use anchor():

css
.help-popover {
  top: calc(anchor(bottom) + 0.5rem);
  left: anchor(left);
}

This is particularly useful for popovers, callouts, menus, and teaching tips. Verify the browser baseline for the exact positioning behavior, and provide a simpler fallback when the required support is not available.

Rendering containment and content-visibility

On a very long page, the browser may be able to skip rendering work for content that is offscreen:

css
.report-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

This is a performance feature with behavioral consequences, not a default style for every section. Test fragment navigation, find-in-page, layout-dependent JavaScript, printing, and accessibility behavior. The intrinsic size provides a placeholder estimate while the section is skipped, so test whether that estimate is appropriate for the page's layout.

Modern form and intrinsic sizing helpers

Some newer platform features remove JavaScript that was used only to measure presentation. For example:

css
textarea {
  field-sizing: content;
  max-block-size: 15rem;
}

For intrinsic-size transitions, newer sizing and interpolation features may allow smoother movement between explicit sizes and intrinsic values. These remain progressive enhancements: check exact browser support before making them part of the only usable interaction.

Adoption ladder for new CSS

For every modern feature, use a short decision process:

  1. identify the user problem;
  2. define the baseline experience;
  3. check project browser support;
  4. implement the smallest enhancement;
  5. test keyboard, zoom, motion preference, contrast, and RTL where relevant;
  6. measure performance if the feature changes rendering cost;
  7. document why the feature exists.

“Modern” should describe code that is less fragile and easier to maintain, not code that contains the newest possible syntax.

Common mistakes

  • Putting every rule in a cascade layer without defining a useful order.
  • Assuming layers make specificity irrelevant.
  • Nesting selectors until components depend on distant DOM structure.
  • Using CSS direction instead of correct HTML directionality.
  • Choosing subgrid when independent card layouts would be simpler.
  • Adding @supports fallbacks for browsers outside the product's support target.
  • Adopting a feature solely because it is new.

Practice set

  1. Put reset/vendor/base/components/utilities into cascade layers. Make the order explicit and check which layer wins before trying to change selector specificity.
  2. Convert a flat component to native nesting, then keep nesting no deeper than necessary. Check that the resulting selectors still express component ownership rather than a fragile DOM path.
  3. Build a prose scope with @scope. Confirm that semantic elements inside the scope are styled without affecting matching elements elsewhere.
  4. Replace left/right spacing with logical properties. Test the result with a different direction or writing mode.
  5. Build pricing cards with subgrid. Use body text of different lengths and verify that titles, content, and actions align as intended.
  6. Add one modern feature through progressive enhancement and document the support reason. Include the baseline behavior, the capability check, and the relevant keyboard, contrast, motion, or performance test.

Recap

Modern CSS gives authors more deliberate control over cascade architecture, component-local styling, nested rules, international layouts, responsive behavior, and alignment across repeated components. It also provides newer tools for color, viewport sizing, scrolling, transitions, positioning, containment, and intrinsic sizing. The objective is not to use the largest possible feature set. Choose the smallest supported feature that makes the interface simpler and more resilient.

Official references

Reader page: /css/lesson/041/modern-css-cascade-layers-nesting-scope-subgrid-logical-properties-and-progressive-features