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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.