Styles " in a House "

Previously, to prevent styles of one site part from affecting another, we used BEM or CSS Modules. Now there's native @scope.

Example:

You want links inside article to look special, but not touch links in menu.

@scope (.article) {
  a { color: darkgreen; } /* Will work only for links INSIDE .article */
}

Exclusion (Donut Scoping):

You can specify a " hole " inside which styles stop working.

@scope (.card) to (.card-footer) {
  img { border-radius: 50%; } /* Won't touch images in card footer */
}