Skip to main
Link
12 Days of Web

CSS @scope

Keep selector conflicts to a minimum

by Miriam Suzanne at 12 Days of Web on

The new @scope rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.

See more at 12 Days of Web »

Scoped styles have always been the primary goal of CSS. Selectors scope declarations to matched elements. Those selectors can be combined to create more specific scopes – each modified by its relation to others. But the @scope feature, already available in Chromium browsers, will make that functionality even more powerful.

Upcoming Workshop

Mia from behind, standing at a laptop - speaking to a conference audience and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

by Miriam

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

  1. FD logo repeated on a red background
    Link post type

    5 Questions for Miriam Suzanne

    Miriam Suzanne at Frontend Dogma on

    I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.

    see all Link posts
  2. A close up of the hands of a person handing a package to another person.
    Link post type

    Sass Package Importer (Request for Comments)

    A new proposal for importing from NPM packages in Sass

    James Stuckey Weber at Sass Blog on

    UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g. @use "pkg:bootstrap".

    see all Link posts
  3. 12 Days of Web
    Link post type

    Cascade Layers

    Giving us control over the cascade

    Miriam Suzanne at 12 Days of Web on

    Don’t let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the !important flag.

    see all Link posts

OddNews Sign Up

Get the latest news in front-end development — CSS, HTML, JavaScript, and UX. See Archive