[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-css-scope-native-style-scoping":32,"code:css:true:1u7h9qw":268,"code:css:true:jjl9wx":269,"code:css:true:18zli6s":270,"code:css:true:gnm460":271,"code:css:true:1qcu26r":272,"code:html:true:19smlsw":273,"code:css:true:l18mnv":274,"code:html:true:24s0p8":275,"code:css:true:f2ar9x":276},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":251,"seo":252,"translationGroupId":255,"thread":256,"assessments":258,"translations":264,"quiz":266},"019fe660-b09d-731e-b160-9e45270a5652","css-scope-native-style-scoping","CSS has no native scoping. `@scope` changes that.",null,"BEM, CSS Modules, and scoped component styles all exist because CSS leaks — a rule written for one component can silently affect another. `@scope` gives the cascade a lower boundary so styles stay where you put them, natively, with no build step.","\u002Fmedia\u002Fcovers\u002Fcss-scope-native-style-scoping.png",5,"2026-07-31T08:56:20.507Z",79,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":64},1,{"slug":34,"title":66},"@scope — native CSS style scoping",{"blocks":68,"version":64},[69,73,76,81,84,87,92,95,98,101,104,108,111,117,120,123,126,129,132,135,138,141,145,148,152,155,158,161,165,170,173,176,180,183,186,190,193,197,200,203,206,209,213,216,219,222,225,228,231,234,237,240,243],{"id":70,"html":71,"type":72},"b1","\u003Cp>Every CSS naming convention — BEM, SMACSS, ITCSS — exists to solve the same problem: CSS has no scoping. A rule you write for one component will apply to any matching element anywhere on the page. The solution people reach for is either a disciplined naming scheme (\u003Ccode>card__title\u003C\u002Fcode>) or a build-time tool that rewrites selectors into hashed strings (CSS Modules, CSS-in-JS). Both work. Neither is the platform doing it for you.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"type":72},"b2","\u003Cp>\u003Ccode>@scope\u003C\u002Fcode> is the platform doing it for you. It shipped in Chrome 118, Firefox 128, and Safari 17.4 — broadly available, no polyfill needed.\u003C\u002Fp>",{"id":77,"html":78,"text":79,"type":80,"level":31},"b3","What \u003Ccode>@scope\u003C\u002Fcode> does","What @scope does","heading",{"id":82,"html":83,"type":72},"b4","\u003Cp>\u003Ccode>@scope\u003C\u002Fcode> takes a \u003Cem>scoping root\u003C\u002Fem> — a selector that marks the boundary of a subtree — and an optional \u003Cem>scoping limit\u003C\u002Fem> — a selector that marks where the scope stops. Rules written inside the block apply only to elements that are descendants of the root and not also descendants of the limit.\u003C\u002Fp>",{"id":85,"html":86,"type":72},"b5","\u003Cp>The basic form:\u003C\u002Fp>",{"id":88,"code":89,"type":90,"language":49,"highlight":91},"b6","@scope (.card) {\n  .title {\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  .body {\n    color: oklch(40% 0 0);\n  }\n}","code",[],{"id":93,"html":94,"type":72},"b7","\u003Cp>\u003Ccode>.title\u003C\u002Fcode> here only matches elements with \u003Ccode>class="title"\u003C\u002Fcode> that are inside a \u003Ccode>.card\u003C\u002Fcode>. A \u003Ccode>.title\u003C\u002Fcode> outside any \u003Ccode>.card\u003C\u002Fcode>, or inside a \u003Ccode>.card\u003C\u002Fcode> nested inside another component, is unaffected. You don't need to write \u003Ccode>.card .title\u003C\u002Fcode> — the selector is already implicitly scoped.\u003C\u002Fp>",{"id":96,"html":97,"text":97,"type":80,"level":31},"b8","The lower boundary: the part most tutorials skip",{"id":99,"html":100,"type":72},"b9","\u003Cp>The \u003Cem>scoping limit\u003C\u002Fem> is what makes \u003Ccode>@scope\u003C\u002Fcode> genuinely different from just using a descendant selector.\u003C\u002Fp>",{"id":102,"html":103,"type":72},"b10","\u003Cp>Imagine a card component that can contain a testimonial sub-component. The testimonial has its own \u003Ccode>.title\u003C\u002Fcode>. You want the card styles to not leak into the testimonial.\u003C\u002Fp>",{"id":105,"code":106,"type":90,"language":49,"highlight":107},"b11","@scope (.card) to (.testimonial) {\n  .title {\n    font-size: 1.25rem;\n  }\n}",[],{"id":109,"html":110,"type":72},"b12","\u003Cp>Now \u003Ccode>.title\u003C\u002Fcode> matches only when it is:\u003C\u002Fp>",{"id":112,"type":113,"items":114,"ordered":18},"b13","list",[115,116],"inside a \u003Ccode>.card\u003C\u002Fcode>, \u003Cstrong>and\u003C\u002Fstrong>","not also inside a \u003Ccode>.testimonial\u003C\u002Fcode> that is itself inside that \u003Ccode>.card\u003C\u002Fcode>",{"id":118,"html":119,"type":72},"b14","\u003Cp>Without the lower boundary, a descendant selector would match every \u003Ccode>.title\u003C\u002Fcode> in the whole subtree, including the testimonial's. The closest you can get with a plain selector is bolting on an escape hatch — \u003Ccode>.card .title:not(.testimonial *)\u003C\u002Fcode> — and then repeating it, correctly, on every rule in the component. \u003Ccode>@scope\u003C\u002Fcode> states the boundary once in the prelude and every rule in the block inherits it.\u003C\u002Fp>",{"id":121,"html":122,"type":72},"b15","\u003C!-- playground:start -->",{"id":124,"html":125,"text":125,"type":80,"level":31},"b16","🎮 Try it yourself",{"id":127,"html":128,"type":72},"b17","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-31-css-scope-native-style-scoping\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":130,"html":131,"type":72},"b18","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":133,"html":134,"type":72},"b19","\u003C!-- playground:end -->",{"id":136,"html":137,"text":137,"type":80,"level":31},"b20","Replacing a BEM naming pattern",{"id":139,"html":140,"type":72},"b21","\u003Cp>Here is a typical card written in BEM:\u003C\u002Fp>",{"id":142,"code":143,"type":90,"language":49,"highlight":144},"b22",".card { }\n.card__header { }\n.card__title { font-size: 1.25rem; }\n.card__body { color: #555; }\n.card__footer { border-top: 1px solid #e5e7eb; }",[],{"id":146,"html":147,"type":72},"b23","\u003Cp>The same component with \u003Ccode>@scope\u003C\u002Fcode>:\u003C\u002Fp>",{"id":149,"code":150,"type":90,"language":49,"highlight":151},"b24","@scope (.card) {\n  .header { }\n  .title { font-size: 1.25rem; }\n  .body { color: oklch(40% 0 0); }\n  .footer { border-top: 1px solid oklch(92% 0 0); }\n}",[],{"id":153,"html":154,"type":72},"b25","\u003Cp>The class names in your HTML become \u003Ccode>.header\u003C\u002Fcode>, \u003Ccode>.title\u003C\u002Fcode>, \u003Ccode>.body\u003C\u002Fcode>, \u003Ccode>.footer\u003C\u002Fcode> — not \u003Ccode>.card__header\u003C\u002Fcode>, \u003Ccode>.card__title\u003C\u002Fcode>. The naming convention was the documentation for the scoping relationship; \u003Ccode>@scope\u003C\u002Fcode> makes that relationship structural instead.\u003C\u002Fp>",{"id":156,"html":157,"text":157,"type":80,"level":31},"b26","Proximity breaks ties",{"id":159,"html":160,"type":72},"b27","\u003Cp>There is a subtlety worth knowing, and it's the one most \u003Ccode>@scope\u003C\u002Fcode> explainers get backwards: when two \u003Ccode>@scope\u003C\u002Fcode> rules match the same element, the one whose scope root is closest to the element wins — \u003Cem>provided their specificity is equal\u003C\u002Fem>.\u003C\u002Fp>",{"id":162,"code":163,"type":90,"language":49,"highlight":164},"b28","@scope (.page) {\n  .button { background: blue; }\n}\n\n@scope (.sidebar) {\n  .button { background: green; }\n}",[],{"id":166,"code":167,"type":90,"language":168,"highlight":169},"b29","\u003Cdiv class=\"page\">\n  \u003Cdiv class=\"sidebar\">\n    \u003Cbutton class=\"button\">Click me\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>","html",[],{"id":171,"html":172,"type":72},"b30","\u003Cp>The button gets a green background. Both rules are specificity \u003Ccode>0,1,0\u003C\u002Fcode>, so the tie falls through to \u003Cem>scope proximity\u003C\u002Fem>, and \u003Ccode>.sidebar\u003C\u002Fcode> is closer to the button than \u003Ccode>.page\u003C\u002Fcode> is.\u003C\u002Fp>",{"id":174,"html":175,"type":72},"b31","\u003Cp>Now change one thing:\u003C\u002Fp>",{"id":177,"code":178,"type":90,"language":49,"highlight":179},"b32","@scope (.page) {\n  .button.button.button { background: blue; }  \u002F* 0,3,0 *\u002F\n}\n\n@scope (.sidebar) {\n  .button { background: green; }               \u002F* 0,1,0 *\u002F\n}",[],{"id":181,"html":182,"type":72},"b33","\u003Cp>The button turns blue. Scope proximity sits \u003Cem>below\u003C\u002Fem> specificity in the cascade — \u003Ca href=\"https:\u002F\u002Fdrafts.csswg.org\u002Fcss-cascade-6\u002F#cascade-sort\">Cascade 6 sorts by origin, context, element-attached styles, layers, specificity, \u003Cstrong>then\u003C\u002Fstrong> proximity, then order of appearance\u003C\u002Fa>. So a more specific selector in a distant scope still beats a less specific one nearby. Proximity is a tiebreaker, not a trump card.\u003C\u002Fp>",{"id":184,"html":185,"type":72},"b34","\u003Cp>The practical version: inside a component library where every rule is a single class, proximity does the intuitive thing and local styles win. The moment you start stacking selectors for specificity, you're back to the old rules.\u003C\u002Fp>",{"id":187,"html":188,"text":189,"type":80,"level":31},"b35","Inline scoping with \u003Ccode>@scope\u003C\u002Fcode> in \u003Ccode><style>\u003C\u002Fcode> blocks","Inline scoping with @scope in \u003Cstyle> blocks",{"id":191,"html":192,"type":72},"b36","\u003Cp>\u003Ccode>@scope\u003C\u002Fcode> also works without a root argument inside a \u003Ccode><style>\u003C\u002Fcode> element. In that form it scopes to the style element's own parent element — which is useful in web components or template-based systems where each template has its own embedded styles:\u003C\u002Fp>",{"id":194,"code":195,"type":90,"language":168,"highlight":196},"b37","\u003Carticle class=\"post\">\n  \u003Cstyle>\n    @scope {\n      h2 { font-size: 1.5rem; }\n      p { line-height: 1.7; }\n    }\n  \u003C\u002Fstyle>\n  \u003Ch2>Post title\u003C\u002Fh2>\n  \u003Cp>Body text.\u003C\u002Fp>\n\u003C\u002Farticle>",[],{"id":198,"html":199,"type":72},"b38","\u003Cp>The \u003Ccode>h2\u003C\u002Fcode> and \u003Ccode>p\u003C\u002Fcode> rules here only apply inside this \u003Ccode><article>\u003C\u002Fcode>. Any other \u003Ccode>h2\u003C\u002Fcode> or \u003Ccode>p\u003C\u002Fcode> on the page is untouched.\u003C\u002Fp>",{"id":201,"html":202,"text":202,"type":80,"level":31},"b39","Browser support",{"id":204,"html":205,"type":72},"b40","\u003Cp>\u003Ccode>@scope\u003C\u002Fcode> is \u003Cstrong>Baseline 2024\u003C\u002Fstrong>: Chrome 118 (October 2023), Firefox 128 (July 2024), Safari 17.4 (March 2024).\u003C\u002Fp>",{"id":207,"html":208,"type":72},"b41","\u003Cp>Older browsers silently ignore the \u003Ccode>@scope\u003C\u002Fcode> block — rules inside it do not apply. For a graceful fallback, write your standard scoped selectors first and let \u003Ccode>@scope\u003C\u002Fcode> be a progressive enhancement:\u003C\u002Fp>",{"id":210,"code":211,"type":90,"language":49,"highlight":212},"b42","\u002F* fallback: works everywhere *\u002F\n.card .title { font-size: 1.25rem; }\n\n\u002F* enhancement: better proximity behavior, cleaner selectors *\u002F\n@scope (.card) {\n  .title { font-size: 1.25rem; }\n}",[],{"id":214,"html":215,"type":72},"b43","\u003C!-- quiz:start -->",{"id":217,"html":218,"text":218,"type":80,"level":31},"b44","🧠 Test yourself",{"id":220,"html":221,"type":72},"b45","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-31-css-scope-native-style-scoping\">Take the 8-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":223,"html":224,"type":72},"b46","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":226,"html":227,"type":72},"b47","\u003C!-- quiz:end -->",{"id":229,"html":230,"text":230,"type":80,"level":31},"b48","The takeaway",{"id":232,"html":233,"type":72},"b49","\u003Cp>\u003Ccode>@scope\u003C\u002Fcode> is not a replacement for every CSS architecture decision — specificity, cascade layers, and custom properties all still apply. What it replaces is the \u003Cem>naming convention as a scoping mechanism\u003C\u002Fem>. If your CSS class names carry double underscores or component prefixes solely to prevent leakage, that's the problem \u003Ccode>@scope\u003C\u002Fcode> solves.\u003C\u002Fp>",{"id":235,"html":236,"type":72},"b50","\u003Cp>Look for the places in your stylesheet where every rule starts with the same parent selector: \u003Ccode>.card .x\u003C\u002Fcode>, \u003Ccode>.card .y\u003C\u002Fcode>, \u003Ccode>.card .z\u003C\u002Fcode>. Wrap them in \u003Ccode>@scope (.card) { ... }\u003C\u002Fcode> and drop the parent prefix from each inner rule. Add a lower boundary to any scope that contains nested components. The cascade still works — you're just giving it better information about where rules are meant to apply.\u003C\u002Fp>",{"id":238,"type":239},"b51","divider",{"id":241,"html":242,"type":72},"b52","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":244,"type":113,"items":245,"ordered":18},"b53",[246,247,248,249,250],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Every CSS naming convention — BEM, SMACSS, ITCSS — exists to solve the same problem: CSS has no scoping. A rule you write for one component will apply to any matching element anywhere on the page. The solution people reach for is either a disciplined naming scheme (`card__title`) or a build-time tool that rewrites selectors into hashed strings (CSS Modules, CSS-in-JS). Both work. Neither is the platform doing it for you.\n\n`@scope` is the platform doing it for you. It shipped in Chrome 118, Firefox 128, and Safari 17.4 — broadly available, no polyfill needed.\n\n## What `@scope` does\n\n`@scope` takes a *scoping root* — a selector that marks the boundary of a subtree — and an optional *scoping limit* — a selector that marks where the scope stops. Rules written inside the block apply only to elements that are descendants of the root and not also descendants of the limit.\n\nThe basic form:\n\n```css\n@scope (.card) {\n  .title {\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  .body {\n    color: oklch(40% 0 0);\n  }\n}\n```\n\n`.title` here only matches elements with `class=\"title\"` that are inside a `.card`. A `.title` outside any `.card`, or inside a `.card` nested inside another component, is unaffected. You don't need to write `.card .title` — the selector is already implicitly scoped.\n\n## The lower boundary: the part most tutorials skip\n\nThe *scoping limit* is what makes `@scope` genuinely different from just using a descendant selector.\n\nImagine a card component that can contain a testimonial sub-component. The testimonial has its own `.title`. You want the card styles to not leak into the testimonial.\n\n```css\n@scope (.card) to (.testimonial) {\n  .title {\n    font-size: 1.25rem;\n  }\n}\n```\n\nNow `.title` matches only when it is:\n- inside a `.card`, **and**\n- not also inside a `.testimonial` that is itself inside that `.card`\n\nWithout the lower boundary, a descendant selector would match every `.title` in the whole subtree, including the testimonial's. The closest you can get with a plain selector is bolting on an escape hatch — `.card .title:not(.testimonial *)` — and then repeating it, correctly, on every rule in the component. `@scope` states the boundary once in the prelude and every rule in the block inherits it.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-31-css-scope-native-style-scoping\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## Replacing a BEM naming pattern\n\nHere is a typical card written in BEM:\n\n```css\n.card { }\n.card__header { }\n.card__title { font-size: 1.25rem; }\n.card__body { color: #555; }\n.card__footer { border-top: 1px solid #e5e7eb; }\n```\n\nThe same component with `@scope`:\n\n```css\n@scope (.card) {\n  .header { }\n  .title { font-size: 1.25rem; }\n  .body { color: oklch(40% 0 0); }\n  .footer { border-top: 1px solid oklch(92% 0 0); }\n}\n```\n\nThe class names in your HTML become `.header`, `.title`, `.body`, `.footer` — not `.card__header`, `.card__title`. The naming convention was the documentation for the scoping relationship; `@scope` makes that relationship structural instead.\n\n## Proximity breaks ties\n\nThere is a subtlety worth knowing, and it's the one most `@scope` explainers get backwards: when two `@scope` rules match the same element, the one whose scope root is closest to the element wins — *provided their specificity is equal*.\n\n```css\n@scope (.page) {\n  .button { background: blue; }\n}\n\n@scope (.sidebar) {\n  .button { background: green; }\n}\n```\n\n```html\n\u003Cdiv class=\"page\">\n  \u003Cdiv class=\"sidebar\">\n    \u003Cbutton class=\"button\">Click me\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\nThe button gets a green background. Both rules are specificity `0,1,0`, so the tie falls through to *scope proximity*, and `.sidebar` is closer to the button than `.page` is.\n\nNow change one thing:\n\n```css\n@scope (.page) {\n  .button.button.button { background: blue; }  \u002F* 0,3,0 *\u002F\n}\n\n@scope (.sidebar) {\n  .button { background: green; }               \u002F* 0,1,0 *\u002F\n}\n```\n\nThe button turns blue. Scope proximity sits *below* specificity in the cascade — [Cascade 6 sorts by origin, context, element-attached styles, layers, specificity, **then** proximity, then order of appearance](https:\u002F\u002Fdrafts.csswg.org\u002Fcss-cascade-6\u002F#cascade-sort). So a more specific selector in a distant scope still beats a less specific one nearby. Proximity is a tiebreaker, not a trump card.\n\nThe practical version: inside a component library where every rule is a single class, proximity does the intuitive thing and local styles win. The moment you start stacking selectors for specificity, you're back to the old rules.\n\n## Inline scoping with `@scope` in `\u003Cstyle>` blocks\n\n`@scope` also works without a root argument inside a `\u003Cstyle>` element. In that form it scopes to the style element's own parent element — which is useful in web components or template-based systems where each template has its own embedded styles:\n\n```html\n\u003Carticle class=\"post\">\n  \u003Cstyle>\n    @scope {\n      h2 { font-size: 1.5rem; }\n      p { line-height: 1.7; }\n    }\n  \u003C\u002Fstyle>\n  \u003Ch2>Post title\u003C\u002Fh2>\n  \u003Cp>Body text.\u003C\u002Fp>\n\u003C\u002Farticle>\n```\n\nThe `h2` and `p` rules here only apply inside this `\u003Carticle>`. Any other `h2` or `p` on the page is untouched.\n\n## Browser support\n\n`@scope` is **Baseline 2024**: Chrome 118 (October 2023), Firefox 128 (July 2024), Safari 17.4 (March 2024).\n\nOlder browsers silently ignore the `@scope` block — rules inside it do not apply. For a graceful fallback, write your standard scoped selectors first and let `@scope` be a progressive enhancement:\n\n```css\n\u002F* fallback: works everywhere *\u002F\n.card .title { font-size: 1.25rem; }\n\n\u002F* enhancement: better proximity behavior, cleaner selectors *\u002F\n@scope (.card) {\n  .title { font-size: 1.25rem; }\n}\n```\n\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 8-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-31-css-scope-native-style-scoping)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\n`@scope` is not a replacement for every CSS architecture decision — specificity, cascade layers, and custom properties all still apply. What it replaces is the *naming convention as a scoping mechanism*. If your CSS class names carry double underscores or component prefixes solely to prevent leakage, that's the problem `@scope` solves.\n\nLook for the places in your stylesheet where every rule starts with the same parent selector: `.card .x`, `.card .y`, `.card .z`. Wrap them in `@scope (.card) { ... }` and drop the parent prefix from each inner rule. Add a lower boundary to any scope that contains nested components. The cascade still works — you're just giving it better information about where rules are meant to apply.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":35,"canonical":253,"description":254},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-scope-native-style-scoping","BEM, CSS Modules, and scoped component styles all exist because CSS leaks — a rule written for one component can silently affect another. `@scope` gives the cascade a lower boundar","019fe660-b09d-731e-b160-a24fa9e387c2",{"id":257,"locked":18},"019fe660-b84a-764b-b4d5-49a15f97f245",[259],{"id":260,"slug":34,"title":261,"_count":262},"019fe776-98fc-76bc-a184-c1b3ba80187f","CSS @scope",{"questions":263},8,[265],{"locale":13,"slug":34},{"id":260,"slug":34,"title":261,"_count":267,"questionCount":263},{"questions":263},"\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">font-weight\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">600\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n  \u003Cspan class=\"shj-var\">.body\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">color\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">oklch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">40\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">to\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.testimonial\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card__header\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card__title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card__body\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">color\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">#555\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card__footer\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">border-top\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">solid\u003C\u002Fspan> \u003Cspan class=\"shj-num\">#e5e7eb\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.header\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.body\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">color\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">oklch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">40\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.footer\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">border-top\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">solid\u003C\u002Fspan> \u003Cspan class=\"shj-func\">oklch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">92\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.page\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">blue\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.sidebar\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">green\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-html shj-multiline\" data-lang=\"html\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">div\u003C\u002Fspan> \u003Cspan class=\"shj-class\">class\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\"page\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">div\u003C\u002Fspan> \u003Cspan class=\"shj-class\">class\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\"sidebar\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">button\u003C\u002Fspan> \u003Cspan class=\"shj-class\">class\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\"button\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>Click me\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">button\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">div\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">div\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.page\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.button\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">blue\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>  \u003Cspan class=\"shj-cmnt\">\u002F* 0,3,0 *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.sidebar\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">green\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>               \u003Cspan class=\"shj-cmnt\">\u002F* 0,1,0 *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-html shj-multiline\" data-lang=\"html\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan> \u003Cspan class=\"shj-class\">class\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\"post\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">style\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n      \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n      \u003Cspan class=\"shj-kwd\">p\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">line-height\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.7\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n    \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">style\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>Post title\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">p\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>Body text.\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">p\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* fallback: works everywhere *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-var\">.title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* enhancement: better proximity behavior, cleaner selectors *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">@scope\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]