Post by Leptos Rust fullstack WASM Developers Hub

CSS just grew up. Here are 3 features that should change how you write styles today: **1. Container Queries — components that know their own size** Stop writing 47 media-query breakpoints for every layout. Container queries let elements respond to the space *they actually occupy*, not the viewport. ```css .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } } ``` Result: truly reusable components that adapt anywhere you drop them. **2. Cascade Layers — control specificity without `!important` wars** Define architecture up front and let the cascade do the work. ```css @layer reset, base, components, utilities; @layer utilities { .hidden { display: none; } } ``` Layers beat specificity fights. Your design system will thank you. **3. `:has()` — the "parent selector" we waited years for** Style an element based on its children or siblings, no JS needed. ```css /* Highlight a figure only when it contains a video */ figure:has(video) { border: 2px solid var(--accent); } /* Style labels with invalid inputs */ label:has(input:invalid) { color: var(--error); } ``` --- **The bottom line:** We’re moving from "style the page" to "style the system." These tools let you build resilient, component-driven UIs with less code and fewer hacks. Which one has had the biggest impact on your workflow? Drop a comment — I’m especially curious where `:has()` is saving people the most JS. #CSS #WebDevelopment #FrontendEngineering #ModernCSS #WebDesign #DeveloperTips #WebDevelopment #TypeScript #Frontend #JavaScript