Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Modern CSS
Pure native CSS for building interfaces — no preprocessors, no frameworks.
When to Use (and When NOT to)
Support statuses below are as of mid-2026. "Newly Baseline (date)" means all three engines ship it, but users on older browsers won't have it — keep graceful degradation. Verify anything critical on MDN or webstatus.dev.
Use Freely (Baseline)
Feature-Detect / Progressive Enhancement
CSS Grid, Subgrid, Flexbox
Scroll-driven animations (Firefox: behind flag)
Container queries — size; style (newly Baseline May 2026)
random() (Safari 26.2+ only), @mixin (no browser yet)
CRITICAL: The Modern Cascade
Understanding how styles resolve is the single most important concept in CSS. The additions of @layer and @scope fundamentally changed the cascade algorithm.
Style Resolution Order (highest priority wins):
┌─────────────────────────────────────────────────┐
│ 1. Transitions (active transition wins) │
│ 2. !important (user-agent > user > author; │
│ layer order INVERTS under !important) │
│ 3. Unlayered author styles (beat ALL layers) │
│ 4. @layer order (later layer > earlier layer) │
│ 5. Specificity (ID > class > element) │
│ 6. @scope proximity (closer root wins) │
│ 7. Source order (later > earlier) │
└─────────────────────────────────────────────────┘
Unlayered > Last layer > ... > First layer
(utilities) (reset)
Cascade layers (@layer) and scope proximity (@scope) are now more powerful than selector specificity. Define your layer order once (@layer reset, base, components, utilities;) and specificity wars disappear. Unlayered styles always beat layered styles — use this for overrides.
Quick Decision Trees
"How do I lay this out?"
Layout approach?
├─ 2D grid (rows + columns) → CSS Grid
│ ├─ Children must align across → Grid + Subgrid
│ └─ Waterfall / masonry → display: grid-lanes (not yet cross-browser)
├─ 1D row OR column → Flexbox
├─ Component adapts to container → Container Query + Grid/Flex
├─ Viewport-based responsiveness → @media range syntax
└─ Element sized to content → fit-content / min-content / stretch
"How do I style this state?"
Style based on what?
├─ Child/descendant presence → :has()
├─ Container size → @container (inline-size)
├─ Container custom property → @container style()
├─ Scroll position (stuck/snapped) → scroll-state() query
├─ Element's own custom property → if(style(...))
├─ Browser feature support → @supports
├─ User preference (motion/color) → @media (prefers-*)
└─ Multiple selectors efficiently → :is() / :where()
"How do I animate this?"
Animation type?
├─ Enter/appear on DOM → @starting-style + transition
├─ Exit/disappear (display:none) → transition-behavior: allow-discrete
├─ Animate to/from auto height → interpolate-size: allow-keywords
├─ Scroll-linked (parallax/reveal) → animation-timeline: scroll()/view()
├─ Page/view navigation → View Transitions API
├─ Custom easing (bounce/spring) → linear() function
└─ Always: respect user preference → @media (prefers-reduced-motion)
What CSS Replaced JavaScript For
JavaScript Pattern
CSS Replacement
Scroll position listeners
Scroll-driven animations
IntersectionObserver for reveal
animation-timeline: view()
Sticky header shadow toggle
scroll-state(stuck: top)
Floating UI / Popper.js
Anchor positioning
Carousel prev/next/dots
::scroll-button(), ::scroll-marker
Auto-expanding textarea
field-sizing: content
Staggered animation delays
sibling-index()
max-height: 9999px hack
interpolate-size: allow-keywords
Parent element selection
:has()
Theme toggle logic
light-dark() + color-scheme
Tooltip/popover show/hide
Popover API + invoker commands
Color manipulation functions
color-mix(), relative color syntax
For non-Baseline features, always feature-detect with @supports or use progressive enhancement. Check MDN or Baseline for current browser support.
Anti-Patterns (CRITICAL)
Anti-Pattern
Problem
Fix
Overusing !important
Specificity arms race
Use @layer for cascade control
Deep nesting (.a .b .c .d)
Fragile, DOM-coupled
Flat selectors, @scope
IDs for styling (#header)
Too specific to override
Classes (.header)
@media for component layout
Viewport-coupled, not reusable
Container queries
JS scroll listeners for effects
Janky, expensive
Scroll-driven animations
JS for tooltip positioning
Floating UI dependency
Anchor positioning
JS for carousel controls
Fragile, a11y issues
::scroll-button, ::scroll-marker
JS for auto-expanding textarea
Unnecessary complexity
field-sizing: content
max-height: 9999px for animation
Wrong duration, janky
interpolate-size: allow-keywords
margin-left / padding-right
Breaks in RTL/vertical
Logical properties (margin-inline-start)
rgba() with commas
Legacy syntax
rgb(r g b / a) space-separated
appearance: none on selects
Removes ALL functionality
appearance: base-select
Preprocessor-only variables
Can't change at runtime
CSS custom properties
Preprocessor-only nesting
Extra build step dependency
Native CSS nesting
Preprocessor color functions
Can't respond to context
color-mix(), relative colors
text-wrap: balance on paragraphs
Performance-heavy
Only headings/short text
content-visibility above fold
Delays LCP rendering
Only off-screen sections
Overusing will-change
Wastes GPU memory
Apply only to animating elements
Reference Documentation
Open the reference file BEFORE writing code in its area — each contains the sharp edges and support caveats that are easy to get wrong.
