{"id":3002,"date":"2024-07-12T12:41:35","date_gmt":"2024-07-12T18:41:35","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3002"},"modified":"2024-07-12T12:41:36","modified_gmt":"2024-07-12T18:41:36","slug":"css-does-need-mixins","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/css-does-need-mixins\/","title":{"rendered":"Style Queries are Almost Like Mixins (But Mixins Would Be Better)"},"content":{"rendered":"\n

I was styling a menu thing the other day, and it had some decently nested selectors. Normally I’m a pretty big fan of putting a class right on the thing you want to style and keeping CSS selectors pretty “flat” in that they are just that class alone. But for menus and the semantic HTML within, a little nesting seemed reasonable. For instance this HTML:<\/p>\n\n\n

<nav<\/span> class<\/span>=\"site-nav\"<\/span>><\/span>\n  <ul<\/span>><\/span>\n    <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Home<\/a<\/span>><\/span><\/li<\/span>><\/span>\n    <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Contact<\/a<\/span>><\/span><\/li<\/span>><\/span>\n    <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>About<\/a<\/span>><\/span><\/li<\/span>><\/span>\n    <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>History<\/a<\/span>><\/span><\/li<\/span>><\/span>\n  <\/ul<\/span>><\/span>\n<\/nav<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Can lead to this kind of CSS:<\/p>\n\n\n
.site-nav<\/span> {\n  > ul {\n    > li {\n      > a {\n        &:hover, \n        &:focus {\n        }\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I can see how that turns some people off, but honestly it doesn’t bother me that much. The structure is reliable here and I’d rather this setup in CSS than a class on every one of those links in the HTML. <\/p>\n\n\n\n
If we get into sub-<\/em>menu territory though, it gets gnarlier:<\/p>\n\n\n
.site-nav<\/span> {\n  > ul {\n    > li {\n      > ul { \/* sub menu *\/<\/span>\n        > li {\n          > a {\n            &:hover,\n            &:focus {\n              \n            }\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I’m willing to admit this is probably a bit too far in nesting town \ud83d\ude2c. Particularly because at each of those nested levels there will be a bunch of styling and it will become hard to reason about quite quickly.<\/p>\n\n\n\n
It occurred to me that the (newfangled, not production-ready) CSS style queries might be able to jump in  and help here, because they behave a bit like a mixin. <\/p>\n\n\n\n
Mixin?<\/p>\n\n\n\n
Yeah! That’s what Sass called the concept, anyway. A mixin allows us to name<\/em> a block of styles, then call them as needed. So…<\/p>\n\n\n
@mixin<\/span> linkHovered {\n  background<\/span>: red;\n  color<\/span>: white; \n}\n\n.site-nav<\/span> {\n  > ul<\/span> {\n    > li<\/span> {\n      > a<\/span> {\n        &:hover<\/span>, \n        &:focus<\/span> {\n          @include<\/span> linkHovered;\n        }\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
So now we’ve kind of<\/em> flattened out the styles a bit. We have this re-usable chunk of styles that we can just call rather than nest the styles so deeply. <\/p>\n\n\n\n
What I wanted to try here was using Style Queries (and not<\/em> Sass), but unfortunately it’s not quite as clean as I’d like. After using Sass for so long, this is what I wanted to work:<\/p>\n\n\n
\/* Invalid! Doesn't select anything *\/<\/span>\n@container<\/span> style(--linkHovered) {\n  background<\/span>: red<\/span>;\n}\n\n.site-nav<\/span> {\n  > ul {\n    > li {\n      > a {\n        &:hover, &:focus {\n          --linkHovered<\/span>: true;\n        }\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
But that’s a no-go. The @container<\/code> style query either needs to be nested within the other styles so that it has an implied selector (which defeats the “flatten the styles” purpose) or it needs an explicit selector inside it. So it needs to be like this:<\/p>\n\n\n
@container<\/span> style(--hasLinkHovered) {\n  a<\/span> {\n    background<\/span>: red;\n  }\n}\n\n.site-nav<\/span> {\n  > ul {\n    > li {\n      &:has(> a<\/span>:hover, > a:focus) {\n        --hasLinkHovered: true;\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That works (where supported<\/a>): <\/p>\n\n\n\n