--- title: Design Systems + Horizontal @layer – Master.dev Blog description: A short roundup linking three interconnected posts on scaling CSS design token overrides: one on using CSS @layer horizontally for component defaults, a... canonical: https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Design Systems + Horizontal @layer – Master.dev Blog | daily.dev og:description: A short roundup linking three interconnected posts on scaling CSS design token overrides: one on using CSS @layer horizontally for component defaults, a... og:url: https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun og:image: https://api.daily.dev/og/posts/vAqxPNiun.png og:image:alt: Design Systems + Horizontal @layer – Master.dev Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Design Systems + Horizontal @layer – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 1 min read · 6 upvotes · 0 comments ## Summary A short roundup linking three interconnected posts on scaling CSS design token overrides: one on using CSS @layer horizontally for component defaults, a follow-up exploring how this could work at enterprise scale where tokens come from a build pipeline rather than being hand-written, and another exploring achieving similar variable overrides without @layer using the :defined selector to target custom elements without naming them. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### how can I override CSS custom property defaults on web components without naming each component individually Use the :defined CSS pseudo-class selector to target components generically once they have been upgraded by the custom elements registry, allowing variable overrides to apply broadly without hardcoding component tag names. This approach works as an alternative to using @layer for structuring token overrides in a design system. _Developers overriding component tokens can compare @layer and :defined approaches shared on daily.dev._ ## Similar posts on daily.dev - [Thinking Horizontally in CSS @layer – Master.dev Blog](https://daily.dev/posts/thinking-horizontally-in-css-layer-master-dev-blog-39grfc8td) · Frontend Masters · 46 upvotes · 3 comments - [Design Tokens, Web Components, and CSS @layer](https://daily.dev/posts/design-tokens-web-components-and-css-layer-gknyqzubd) · Always Twisted · 5 upvotes · 0 comments - [How to create a modular and maintainable CSS setup with @layer](https://daily.dev/posts/how-to-create-a-modular-and-maintainable-css-setup-with-layer-8smctixl6) · iO tech\_hub · 7 upvotes · 0 comments - [How to scale CSS in micro frontends \(without losing your mind\)](https://daily.dev/posts/how-to-scale-css-in-micro-frontends-without-losing-your-mind--nblk2xap5) · LogRocket · 3 upvotes · 0 comments - [Design Systems as Governance, Not Just Component Libraries…](https://daily.dev/posts/design-systems-as-governance-not-just-component-libraries--zgw3hf7zh) · Medium · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#design-systems](https://daily.dev/tags/design-systems), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Design Systems + Horizontal @layer – Master.dev Blog","url":"https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun"},"datePublished":"2026-08-24T13:20:07.918Z","dateModified":"2026-09-14T08:07:52.125Z","description":"A short roundup linking three interconnected posts on scaling CSS design token overrides: one on using CSS @layer horizontally for component defaults, a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5a4fad7d24ecbdb0a94f5317fa1f6064?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5a4fad7d24ecbdb0a94f5317fa1f6064?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design,design-systems,web-components","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"Design Systems + Horizontal @layer – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun#faq","mainEntity":[{"@type":"Question","name":"how can I override CSS custom property defaults on web components without naming each component individually","acceptedAnswer":{"@type":"Answer","text":"Use the :defined CSS pseudo-class selector to target components generically once they have been upgraded by the custom elements registry, allowing variable overrides to apply broadly without hardcoding component tag names. This approach works as an alternative to using @layer for structuring token overrides in a design system. Developers overriding component tokens can compare @layer and :defined approaches shared on daily.dev."}}]} ```