{"id":351402,"date":"2021-09-06T11:47:19","date_gmt":"2021-09-06T18:47:19","guid":{"rendered":"https:\/\/css-tricks.com\/?p=351402"},"modified":"2021-09-09T12:02:09","modified_gmt":"2021-09-09T19:02:09","slug":"early-days-for-css-scoping","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/early-days-for-css-scoping\/","title":{"rendered":"Early Days for CSS Scoping"},"content":{"rendered":"\n

There is a working draft spec for CSS scoping<\/a> now. Other than a weird period where <style scoped><\/code> shipped<\/a> and then was subsequently removed from the spec (and browsers), this is the furthest a scoping proposal has gotten (the Level 1 spec<\/a> never got anywhere).<\/p>\n\n\n\n

This one comes from Miriam Suzanne<\/a>.<\/p>\n\n\n\n

The basics:<\/p>\n\n\n\n

<div class=\"media\">\n  <img alt=\"Proper alt.\" src=\"...\">\n  <div class=\"content\">\n    <p>...<\/p>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
If I’m thinking of this bit of HTML as a “component,” it’s nice to be able to write styles for it that are very explicitly just for it. That’s what @scope<\/code> is for, so…<\/p>\n\n\n\n
@scope (.media) {\n  :scope {\n    display: grid;\n    grid-template-columns: 50px 1fr;\n  }\n  img {\n    filter: grayscale(100%);\n    border-radius: 50%;\n  }\n  .content { ... }\n}<\/code><\/pre>\n\n\n\n
What I like about that is:<\/p>\n\n\n\n
  1. This bit of CSS is very explicitly for this media component. It reads like that and can be maintained like that.<\/li>
  2. I didn’t have to come up with a name and class for the <img><\/code>. I’m applying styling there without it “leaking out” to other images.<\/li><\/ol>\n\n\n\n
    But wait, isn’t this just like prepending selectors with the parent class?<\/strong><\/p>\n\n\n\n
    It kind of is… like we could also write:<\/p>\n\n\n\n
    .media {\n}\n.media img {\n}\n.media .content {\n}<\/code><\/pre>\n\n\n\n
    And now we’ve scoped things internal to the media component. That’s rather repetitive, but with native CSS nesting<\/a> on the way, it’s just this:<\/p>\n\n\n\n
    .media {\n  & img {\n  }\n  & .content {\n  }\n}<\/code><\/pre>\n\n\n\n
    So yes, I’d say nesting takes care of some basic types of scoping, but there are some things that are very unique to this new scope proposal.<\/p>\n\n\n\n
    One unique feature is “donut scope”<\/a> meaning I stop<\/em> the scoping where I want to. Maybe I want my scoping to stop at a particular class:<\/p>\n\n\n\n
    @scope (.media) to (.content) {\n  p { }\n}<\/code><\/pre>\n\n\n\n
    Now I can write styles that won’t mess with areas that I don’t want them to mess with. Perhaps:<\/p>\n\n\n\n
    <div class=\"media\">\n  <img alt=\"Proper alt.\" src=\"...\">\n  <p>This is stylable in scope.<\/p>\n  <div class=\"content\">\n    <p>This is NOT styleable in scope.<\/p>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
    But that’s not the only unique problem this new spec solves. I think the “nearest ancestor” situation that Miriam lays out is perhaps the most interesting thing. I’ll send you over to the blog post<\/a> to read about that \u2014 it’s pretty wild that we don’t have a good tool for that yet.<\/p>\n\n\n\n
    There is a lot to wrap your mind around here, especially as you think of more complex situations, like multiple overlapping scopes and how the nesting syntax might interplay with scoping. Fortunately, Miriam is blogging these things<\/a> very clearly.<\/p>\n","protected":false},"excerpt":{"rendered":"
    There is a working draft spec for CSS scoping now. Other than a weird period where <style scoped> shipped and then was subsequently removed from the spec (and browsers), this is the furthest a scoping proposal has gotten (the Level 1 spec never got anywhere). This one comes from Miriam Suzanne. The basics: If I’m […]<\/p>\n","protected":false},"author":3,"featured_media":351404,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18975],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-06-at-11.45.42-AM.png?fit=950%2C570&ssl=1","jetpack-related-posts":[{"id":267479,"url":"https:\/\/css-tricks.com\/everything-need-know-css-variables\/","url_meta":{"origin":351402,"position":0},"title":"Everything you need to know about CSS Variables","date":"February 27, 2018","format":false,"excerpt":"This is by far the biggest deep dive I've seen on CSS Variables posted to the web and it's merely Chapter One of complete e-book on the topic. Truth is, I'm still on the thick of reading through this myself, but had to stop somewhere in the middle to write\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/css-varaibles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":257404,"url":"https:\/\/css-tricks.com\/solve-css-versioning-conflicts-new-relic\/","url_meta":{"origin":351402,"position":1},"title":"How We Solve CSS Versioning Conflicts Here at New Relic","date":"August 4, 2017","format":false,"excerpt":"At first the title made me think of Git conflicts, but that's not what this is about. It's about namespacing selectors for components. Ultimately, they decided to use a Webpack loader (not open source, it doesn't appear) to prefix every single class with a hashed string representing the version. I\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":270319,"url":"https:\/\/css-tricks.com\/css-blocks\/","url_meta":{"origin":351402,"position":2},"title":"CSS Blocks","date":"April 27, 2018","format":false,"excerpt":"A new entry into the CSS-in-JS landscape! Looks like the idea is that you write an individual CSS file for every component. You have to work in components, that's how the whole thing works. In the same isle as styled-components, css-modules, and glamorous. Then you write :scope { } which\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278889,"url":"https:\/\/css-tricks.com\/bridging-the-gap-between-css-and-javascript-css-in-js\/","url_meta":{"origin":351402,"position":3},"title":"Bridging the Gap Between CSS and JavaScript: CSS-in-JS","date":"December 3, 2018","format":false,"excerpt":"In this article, we\u2019re going to dig into the concept of CSS-in-JS. If you\u2019re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article. Web development is very interdisciplinary. We\u2019re used to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/butterfly-in-jar.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":248378,"url":"https:\/\/css-tricks.com\/totally-forgot-print-style-sheets\/","url_meta":{"origin":351402,"position":4},"title":"I totally forgot about print style sheets","date":"November 28, 2016","format":false,"excerpt":"Manuel Matuzovic rediscovers @media print {} styles. The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":303676,"url":"https:\/\/css-tricks.com\/the-unseen-performance-costs-of-modern-css-in-js-libraries\/","url_meta":{"origin":351402,"position":5},"title":"The Unseen Performance Costs of Modern CSS-in-JS Libraries","date":"February 13, 2020","format":false,"excerpt":"This article is full of a bunch of data from Aggelos Arvanitakis. But lemme just focus on his final bit of advice: Investigate whether a zero-runtime CSS-in-JS library can work for your project. Sometimes we tend to prefer writing CSS in JS for the DX (developer experience) it offers, without\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-in-js.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-06-at-11.45.42-AM.png?fit=950%2C570&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351402"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=351402"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351402\/revisions"}],"predecessor-version":[{"id":351694,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351402\/revisions\/351694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/351404"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=351402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=351402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=351402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}