Advanced CSS
Master modern CSS - custom properties, Grid subgrid, container queries, @layer cascade, logical properties, and CSS animations.
skill: Advanced CSS category: Frontend tags: [CSS, CSS Grid, Custom Properties, Container Queries, Animations] readingTime: 6
Modern CSS (2023-2026) eliminated the need for most utility class hacks and JavaScript-driven layouts. Container queries replace media queries for component-level responsiveness. @layer gives explicit cascade control. CSS custom properties (variables) enable theming without build tools. Master these before reaching for a utility framework.
Workflow
- Use CSS custom properties for design systemsCustom properties (variables) are live, inheritable, and accessible from JavaScript - enabling runtime theming, component state, and design token systems.
- Use container queries for responsive componentsMedia queries respond to viewport width - container queries respond to the container's width. Components become truly self-contained and reusable.
- Control cascade with @layer@layer gives explicit control over CSS specificity order - third-party styles no longer override component styles accidentally.
- Build layouts with CSS Grid subgridCSS Subgrid lets nested elements align to their grandparent's grid - eliminating the "sub-containers that break the grid" problem in card layouts.
- Animate with scroll-driven and @starting-styleScroll-driven animations (no JS) link animation progress to scroll position. @starting-style enables enter/exit transitions for display:none elements.
Output Format
Advanced CSS: design tokens with custom properties, container queries for component responsiveness, @layer cascade control, Grid subgrid for aligned cards, and scroll-driven animations.
:root { --token: value } + @media dark
@container name (min-width: Xpx) { ... }
@layer reset, base, components, utilities
grid-template-rows: subgrid on child grids
animation-timeline: view() / scroll(root)Examples
Edge Cases & Gotchas
- Container query units - cqi (container query inline) and cqb (block) are relative to the container size. Don't use them in an element that's also the containment context - they'd be circular.
- @layer and :not() specificity - @layer unlayered styles (outside any layer) always win over layered styles. Put all code in layers to get predictable specificity.
- Subgrid browser support - CSS subgrid is supported in Chrome 117+, Firefox 71+, Safari 16+. Check caniuse.com before using in production without a fallback.
- scroll-driven animations and reduced motion - Always wrap scroll-driven animations with @media (prefers-reduced-motion: no-preference) - users who prefer reduced motion should not get animation.
When to Break These Rules
- Use Tailwind for design systems shared across large teams - utility classes are more portable and faster to onboard than custom CSS systems.
- Use JavaScript animation libraries (GSAP, Framer Motion) for complex interactive animations where CSS scroll-driven animations lack the control needed (e.g., SVG morphing, spring physics).
Reference Files
https://developer.mozilla.org/en-US/docs/Web/CSShttps://caniuse.com/