Style Scoping with Element Queries using EQCSS

Tommy Hodgins on Style Scoping:

Style scoping is the idea that you can select an element anywhere in your document to serve as a point of reference as you write styles.

To achieve this he uses EQCSS, a JavaScript plugin to writing CSS Element Queries (which essentially are “scoped styles with a responsive condition”), and its specific $this selector:

Anywhere $this is present inside of a scoped style it refers to only the scoped element.

@element 'div' and (min-width: 500px) {
  $this { background: red; }
  /* When any div is >=500px, make that div red */

  div { background: lime }
  /* When any div is >=500px, make all divs on the page lime */

  $this div { background: gold }
  /* When any div is >=500px, make all divs inside the scope gold */
}

At the end of the article there are quite a few interesting demos to check out.

How Style Scoping Works with Element Queries →
EQCSS – A CSS Extension for Element Queries & More →