In this article, I\u2019ll explain why I personally love it more and more. We’ll explore how CSS has evolved in recent years, incorporating many features previously available only through preprocessors like SASS and LESS.<\/p>\n\n\n\n
CSS Nesting is a recently introduced feature that allows for more readable and concise nested rules, similar to what was previously only possible with preprocessors like SASS or LESS.<\/p>\n\n\n\n
Now, you no longer need preprocessors to write nested styles. By default, you can structure CSS like this:<\/p>\n\n\n
article {\n color: black;\n\n & h1 {\n font-size: 2rem;\n }\n\n & p {\n line-height: 1.5;\n }\n}\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\nWhat Do Browsers Say?<\/h2>\n\n\n\n
Here\u2019s an overview of browser compatibility (as of January 2025):<\/p>\n\n\n\n
Browser support for CSS Nesting<\/a><\/p>\n\n\n\n
\n\n\n\nWhat is @scope?<\/h2>\n\n\n\n
The @scope<\/code> rule allows you to define a specific context or scope for CSS selectors. Instead of applying styles globally or relying on specificity battles, you can limit the effect of styles to a targeted section of the DOM.<\/p>\n\n\n\nExample:<\/p>\n\n\n
@scope<\/span> (section) {\n h1<\/span> {\n color<\/span>: blue;\n }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nIn this case, only h1<\/code> elements inside section<\/code> tags will have the blue color. This feature provides better modularity and scoping for CSS styles.<\/p>\n\n\n\nCheck the latest browser support here: @scope browser support<\/a><\/p>\n\n\n\n
\n\n\n\nWhat is @layer?<\/h2>\n\n\n\n
The @layer<\/code> rule allows you to define CSS layers with hierarchical priorities. It helps organize styles into structured sections and ensures that more important rules take precedence, even if defined later in the stylesheet.<\/p>\n\n\n\nExample:<\/p>\n\n\n
@layer<\/span> base {\n h1<\/span> {\n color<\/span>: blue;\n }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nNow, let\u2019s consider a case where order matters:<\/p>\n\n\n
@layer<\/span> utilities {\n h1<\/span> {\n color<\/span>: green;\n }\n}\n\n@layer<\/span> base {\n h1<\/span> {\n color<\/span>: blue;\n }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nSince utilities<\/code> is declared first, it takes priority over base<\/code>, even though base<\/code> appears later in the stylesheet.<\/p>\n\n\n\nCheck @layer browser support<\/a><\/p>\n\n\n\n
\n\n\n\nColor Scheme<\/h2>\n\n\n\n
Modern operating systems, browsers, and applications support both dark and light modes. CSS addresses this with the @media<\/code> query prefers-color-scheme<\/code>.<\/p>\n\n\n\nWith this query, you can define variables and styles for different themes.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
:root<\/span> {\n --background-color<\/span>: white;\n --text-color<\/span>: black;\n}\n\n@media<\/span> (prefers-color-scheme:<\/span> dark) {\n :root<\/span> {\n --background-color<\/span>: black;\n --text-color<\/span>: white;\n }\n}\n\nbody<\/span> {\n background-color<\/span>: var<\/span>(--background-color);\n color<\/span>: var<\/span>(--text-color);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n