<p>For the past three years, I&#39;ve done a lot of research and experiments related to the idea of style scoping and element queries in CSS. Since experimenting with element queries, I&#39;ve noticed a big transformation in how I write HTML, and the fine-grained nature of element queries has improved the way I write CSS too.</p>
<p>In this article I am going to explain why I love Element Queries and how you can get started easily.</p>
<h2 id="what-are-element-queries-">What are Element Queries?</h2>
<p><a target='_blank' rel='noopener noreferrer'  href="http://tomhodgins.github.io/element-queries-spec/element-queries.html">Element queries</a> are similar to <a target='_blank' rel='noopener noreferrer'  href="https://drafts.csswg.org/mediaqueries/">media queries</a>, except that their rules apply to the properties of elements instead of the browser&#39;s viewport.</p>
<p>Usually, when you are building a responsive web page, you are applying different responsive styles based on the width of the browser. This means that when you try to re-use a component from one layout in another layout, you often find yourself rewriting the responsive breakpoints to accommodate changes in the layout your component is fitting into without changing the styles inside the breakpoints very much. Thankfully, there is a solution we can use!</p>
<h2 id="what-are-people-saying-about-element-queries-">What are People Saying About Element Queries?</h2>
<div class="embed-wrapper"><a class="embed-card" data-card-width="500px" data-card-key="2e4d628b39a64b99917c73956a16b477" href="https://twitter.com/SaraSoueidan/status/817356620955058176" data-card-controls="0" data-card-theme="light">https://twitter.com/SaraSoueidan/status/817356620955058176</a></div>
<div class="embed-wrapper"><a class="embed-card" data-card-width="500px" data-card-key="2e4d628b39a64b99917c73956a16b477" href="https://twitter.com/scottjehl/status/805906901577900032" data-card-controls="0" data-card-theme="light">https://twitter.com/scottjehl/status/805906901577900032</a></div>
<div class="embed-wrapper"><a class="embed-card" data-card-width="500px" data-card-key="2e4d628b39a64b99917c73956a16b477" href="https://twitter.com/brad_frost/status/767518480128155648" data-card-controls="0" data-card-theme="light">https://twitter.com/brad_frost/status/767518480128155648</a></div>
<div class="embed-wrapper"><a class="embed-card" data-card-width="500px" data-card-key="2e4d628b39a64b99917c73956a16b477" href="https://twitter.com/marcamos/status/791092232317177856" data-card-controls="0" data-card-theme="light">https://twitter.com/marcamos/status/791092232317177856</a></div>
<h2 id="why-do-i-love-element-queries-">Why do I Love Element Queries?</h2>
<p>Element queries open up new dimensions in the way you (as a CSS author) can design your responsive styles. You&#39;re no longer limited to conditions based on just width and height; you can utilize all-new dimensions of responsive expression. This includes applying styles based on the <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/dXGoMZ">number of children</a> or <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/OXMVMB">characters of text</a> an element contains, an element&#39;s <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/gwZqOR">aspect ratio</a> as it appears on the page, and <a target='_blank' rel='noopener noreferrer'  href="https://github.com/eqcss/eqcss#element-query-conditions">many other</a> new conditions beyond what media queries support.</p>
<h3 id="more-powerful-responsive-styles">More Powerful Responsive Styles</h3>
<p>Being able to apply styles in all of these specific situations allows you to have more control over how different parts of the layout are styled. At the same time, by basing the responsive conditions of an element on the element&#39;s own properties, you are freeing those elements and their styles from being based on the browser&#39;s width or height. This allows you to isolate parts of your design to create layout-independent responsive components that are reusable in any layout.</p>
<h3 id="faster-prototyping">Faster Prototyping</h3>
<p>While prototyping a layout or component in the past, I would often write media queries, only to go back and alter or change the breakpoint (or the styles within them) multiple times before the layout was finalized. Perhaps trying to tie component-level responsive styles to layout-dependent breakpoints is a case of <a target='_blank' rel='noopener noreferrer'  href="http://wiki.c2.com/?PrematureOptimization">premature optimization</a>. Once I had written media queries for a layout I was prototyping I found myself much less likely to go back and make changes. If you later need to add more specific support than you initially built, you either end up compromising your design by altering the breakpoints, or you end up adding additional breakpoints to solve problems as new content poses new challenges to your existing layout.</p>
<p>By using element queries during the prototyping stage of a layout, you&#39;re far more likely to adjust your responsive breakpoints, which lets you achieve simpler designs, even if you convert the width and height based breakpoints to media queries at the end of the prototyping stage. Since the breakpoints can apply to a single element, it&#39;s easy to add in support for very specific concerns.</p>
<p>You should never be afraid to change a breakpoint or switch around your responsive styles. If you&#39;re walking on eggshells every time you&#39;re editing your CSS, it&#39;s time for a more robust solution.</p>
<h3 id="smarter-selectors">Smarter Selectors</h3>
<p>Some of the flexibility gained by using element queries comes from the extended ability to select elements, too. Having element queries makes a number of new selectors possible, including a <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/adbzRM">&#39;parent selector&#39;</a> for CSS, which allows you to style an element containing another element</p>
<p>Another way that element queries can make selecting elements smarter is via the ability to access values and properties from JavaScript. This allows you to create custom selector lists, or to select elements using means that CSS isn&#39;t normally aware of. This includes <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/EZYMyK">selecting elements based on their own text content</a>, or <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/KadPrq">selecting inputs by comparing the value of their attributes as numbers</a> (like with <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code> operators), and many more ideas. If it weren&#39;t for element queries, I&#39;d be stuck writing a lot of custom JavaScript to make sure my styles applied correctly in these sorts of cases.</p>
<h3 id="element-based-units">Element-Based Units</h3>
<p>Another thing element queries make possible are element-based units. CSS currently includes <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/YGgLrW">viewport-percentage units</a> <code>vw</code>, <code>vh</code>, <code>vmin</code> and <code>vmax</code>, which represent 1% of the viewport&#39;s width, height, shortest edge and longest edge. When using element queries and scoped styles, you can make use of <a target='_blank' rel='noopener noreferrer'  href="https://tomhodgins.github.io/element-queries-spec/element-queries.html#element-based-units">element-percentage units</a> as well, which are a unit not currently supported by CSS. These are <code>ew</code> for a length equal to 1% of the scoped element&#39;s width, <code>eh</code> for 1% of the element&#39;s height, <code>emin</code> for 1% of the element&#39;s shortest edge, and <code>emax</code> for 1% of the element&#39;s longest edge. Using element-percentage units has come in handy for creating responsive typography, and it&#39;s similarly been useful for creating scalable layouts that show up inside containers that aren&#39;t full-width in the browser.</p>
<h3 id="scoped-styles">Scoped Styles</h3>
<p>Currently, all CSS exists in the global scope. There are some workflows and tools that try to add the idea of modular scopes to CSS, including <a target='_blank' rel='noopener noreferrer'  href="https://github.com/Khan/aphrodite">Aphrodite</a>, <a target='_blank' rel='noopener noreferrer'  href="https://github.com/css-modules/css-modules">CSS Modules</a>, and <a target='_blank' rel='noopener noreferrer'  href="https://github.com/styled-components/styled-components">Styled Components</a>. Through element queries, you can accomplish similar benefits to their <a target='_blank' rel='noopener noreferrer'  href="https://hashnode.com/post/how-style-scoping-works-with-element-queries-ciw6kwym4014rjl532gpa4k48">style scoping</a>, with a scope that&#39;s &#39;alive&#39; on the page as the user interacts with the page and the page&#39;s contents change over time. With element queries and scoped styles, the need to generate unique names for each of your elements is gone too, because you have increased power to select elements beyond what CSS usually allows.</p>
<h3 id="automating-research">Automating Research</h3>
<p>Using element queries has also allowed me to experiment with other ideas and solutions that previously would have been much harder or laborious for me to experiment with by abstracting away a lot of the custom code that would have needed to be written (and re-written many times) to create these experiments. Some topics I&#39;ve been able to research with this amplified ability due to element queries have been:</p>
<ul>
<li><a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/collection/DjzJJx/">aspect ratio solutions</a> and a <a target='_blank' rel='noopener noreferrer'  href="http://github.com/tomhodgins/aspect-ratio-spec">plugin idea</a></li>
<li><a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/collection/XQZRky/">responsive typography</a></li>
<li><a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/post/responsive-tables">responsive tables</a></li>
<li><a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/KgwVOR">new ways to select elements</a> based on <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/GrpwxN">attributes</a> and <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/egpmWN">properties</a></li>
</ul>
<h2 id="why-should-you-love-element-queries-">Why Should you Love Element Queries?</h2>
<p>Unlike many other approaches, element queries are likely to <em>cut down</em> on the amount of work you need to do to realize responsive components and layouts.</p>
<h3 id="make-css-fun">Make CSS Fun</h3>
<p>Element queries make CSS powerful and fun again, and they make styling websites and web apps a breeze. It feels like the way that responsive styles should have been all along. If you&#39;re currently using media queries for responsive breakpoints, this is like media queries with superpowers.</p>
<h3 id="streamline-responsive-design">Streamline Responsive Design</h3>
<p>If you&#39;re currently writing custom JavaScript in your layouts to assist CSS in reaching all of the situations where you need styles to apply, it&#39;s likely that element queries can simplify and standardize your solutions and allow you to more easily re-use your code from layout to layout.</p>
<p>Often, custom layout-specific fixes are fragile and hard to re-use from template to template. But responsive support added with element queries is easier to move around from layout to layout than media queries are, so holding your styles in element queries can be a big time-saver when building layouts in a modular way.</p>
<h3 id="write-futuristic-css">Write Futuristic CSS</h3>
<p>Another reason you&#39;ll love element queries is the new ways in which style scoping can allow you to select elements. For years, people have been begging for a <a target='_blank' rel='noopener noreferrer'  href="https://hashnode.com/post/a-parent-selector-for-css-civy4zgiz0tyj4v5376cx9qo4">parent selector</a> in CSS, but with scoped styles, that&#39;s only the beginning. With new element-based units, you can finally have <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/tomhodgins/pen/YNKVMQ">responsive <code>border</code> widths</a> that <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/dirtyredz/pen/bgbdKK">scale with the element</a> to create <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/GollyJer/pen/xRaNBO">responsive CSS shapes</a>.</p>
<p>The most fun part of designing with element queries is that it feels like time traveling to the future. It feels five years ahead of the CSS supported in browsers today, and because of this, a lot of the problems and pain points of today&#39;s CSS are easy to work around!</p>
<h2 id="how-to-get-started">How to Get Started</h2>
<p>Head over to the <a target='_blank' rel='noopener noreferrer'  href="http://elementqueries.com">element queries website</a> to check out the plugin, read the <a target='_blank' rel='noopener noreferrer'  href="https://tomhodgins.github.io/element-queries-spec/element-queries.html">element queries spec</a> to understand how the syntax works, and head over to <a target='_blank' rel='noopener noreferrer'  href="http://codepen.io/search/pens?q=eqcss&amp;limit=all&amp;type=type-pens">Codepen</a> to view demos built with element queries to see what&#39;s possible with style scoping, element queries, and the new selectors and units that they make possible.</p>
<p>Hope you enjoyed reading the article. Feel free to let me know what you think in comments below.</p>


For the past three years, I've done a lot of research and experiments related to the idea of style scoping and element queries in CSS. Since experimenting with element queries, I've noticed a big transformation in how I write HTML, and the fine-grained nature of element queries has improved the way I write CSS too.

In this article I am going to explain why I love Element Queries and how you can get started easily.

## What are Element Queries?

[Element queries](http://tomhodgins.github.io/element-queries-spec/element-queries.html) are similar to [media queries](https://drafts.csswg.org/mediaqueries/), except that their rules apply to the properties of elements instead of the browser's viewport.

Usually, when you are building a responsive web page, you are applying different responsive styles based on the width of the browser. This means that when you try to re-use a component from one layout in another layout, you often find yourself rewriting the responsive breakpoints to accommodate changes in the layout your component is fitting into without changing the styles inside the breakpoints very much. Thankfully, there is a solution we can use!

## What are People Saying About Element Queries?

%[https://twitter.com/SaraSoueidan/status/817356620955058176]

%[https://twitter.com/scottjehl/status/805906901577900032]

%[https://twitter.com/brad_frost/status/767518480128155648]

%[https://twitter.com/marcamos/status/791092232317177856]

## Why do I Love Element Queries?

Element queries open up new dimensions in the way you (as a CSS author) can design your responsive styles. You're no longer limited to conditions based on just width and height; you can utilize all-new dimensions of responsive expression. This includes applying styles based on the [number of children](http://codepen.io/tomhodgins/pen/dXGoMZ) or [characters of text](http://codepen.io/tomhodgins/pen/OXMVMB) an element contains, an element's [aspect ratio](http://codepen.io/tomhodgins/pen/gwZqOR) as it appears on the page, and [many other](https://github.com/eqcss/eqcss#element-query-conditions) new conditions beyond what media queries support.

### More Powerful Responsive Styles

Being able to apply styles in all of these specific situations allows you to have more control over how different parts of the layout are styled. At the same time, by basing the responsive conditions of an element on the element's own properties, you are freeing those elements and their styles from being based on the browser's width or height. This allows you to isolate parts of your design to create layout-independent responsive components that are reusable in any layout.

### Faster Prototyping

While prototyping a layout or component in the past, I would often write media queries, only to go back and alter or change the breakpoint (or the styles within them) multiple times before the layout was finalized. Perhaps trying to tie component-level responsive styles to layout-dependent breakpoints is a case of [premature optimization](http://wiki.c2.com/?PrematureOptimization). Once I had written media queries for a layout I was prototyping I found myself much less likely to go back and make changes. If you later need to add more specific support than you initially built, you either end up compromising your design by altering the breakpoints, or you end up adding additional breakpoints to solve problems as new content poses new challenges to your existing layout.

By using element queries during the prototyping stage of a layout, you're far more likely to adjust your responsive breakpoints, which lets you achieve simpler designs, even if you convert the width and height based breakpoints to media queries at the end of the prototyping stage. Since the breakpoints can apply to a single element, it's easy to add in support for very specific concerns.

You should never be afraid to change a breakpoint or switch around your responsive styles. If you're walking on eggshells every time you're editing your CSS, it's time for a more robust solution.

### Smarter Selectors

Some of the flexibility gained by using element queries comes from the extended ability to select elements, too. Having element queries makes a number of new selectors possible, including a ['parent selector'](http://codepen.io/tomhodgins/pen/adbzRM) for CSS, which allows you to style an element containing another element

Another way that element queries can make selecting elements smarter is via the ability to access values and properties from JavaScript. This allows you to create custom selector lists, or to select elements using means that CSS isn't normally aware of. This includes [selecting elements based on their own text content](http://codepen.io/tomhodgins/pen/EZYMyK), or [selecting inputs by comparing the value of their attributes as numbers](http://codepen.io/tomhodgins/pen/KadPrq) (like with `<`, `>`, `<=`, and `>=` operators), and many more ideas. If it weren't for element queries, I'd be stuck writing a lot of custom JavaScript to make sure my styles applied correctly in these sorts of cases.

### Element-Based Units

Another thing element queries make possible are element-based units. CSS currently includes [viewport-percentage units](http://codepen.io/tomhodgins/pen/YGgLrW) `vw`, `vh`, `vmin` and `vmax`, which represent 1% of the viewport's width, height, shortest edge and longest edge. When using element queries and scoped styles, you can make use of [element-percentage units](https://tomhodgins.github.io/element-queries-spec/element-queries.html#element-based-units) as well, which are a unit not currently supported by CSS. These are `ew` for a length equal to 1% of the scoped element's width, `eh` for 1% of the element's height, `emin` for 1% of the element's shortest edge, and `emax` for 1% of the element's longest edge. Using element-percentage units has come in handy for creating responsive typography, and it's similarly been useful for creating scalable layouts that show up inside containers that aren't full-width in the browser.

### Scoped Styles

Currently, all CSS exists in the global scope. There are some workflows and tools that try to add the idea of modular scopes to CSS, including [Aphrodite](https://github.com/Khan/aphrodite), [CSS Modules](https://github.com/css-modules/css-modules), and [Styled Components](https://github.com/styled-components/styled-components). Through element queries, you can accomplish similar benefits to their [style scoping](https://hashnode.com/post/how-style-scoping-works-with-element-queries-ciw6kwym4014rjl532gpa4k48), with a scope that's 'alive' on the page as the user interacts with the page and the page's contents change over time. With element queries and scoped styles, the need to generate unique names for each of your elements is gone too, because you have increased power to select elements beyond what CSS usually allows.

### Automating Research

Using element queries has also allowed me to experiment with other ideas and solutions that previously would have been much harder or laborious for me to experiment with by abstracting away a lot of the custom code that would have needed to be written (and re-written many times) to create these experiments. Some topics I've been able to research with this amplified ability due to element queries have been:

- [aspect ratio solutions](http://codepen.io/collection/DjzJJx/) and a [plugin idea](http://github.com/tomhodgins/aspect-ratio-spec)
- [responsive typography](http://codepen.io/collection/XQZRky/)
- [responsive tables](http://codepen.io/tomhodgins/post/responsive-tables)
- [new ways to select elements](http://codepen.io/tomhodgins/pen/KgwVOR) based on [attributes](http://codepen.io/tomhodgins/pen/GrpwxN) and [properties](http://codepen.io/tomhodgins/pen/egpmWN)

## Why Should you Love Element Queries?

Unlike many other approaches, element queries are likely to _cut down_ on the amount of work you need to do to realize responsive components and layouts.

### Make CSS Fun

Element queries make CSS powerful and fun again, and they make styling websites and web apps a breeze. It feels like the way that responsive styles should have been all along. If you're currently using media queries for responsive breakpoints, this is like media queries with superpowers.

### Streamline Responsive Design

If you're currently writing custom JavaScript in your layouts to assist CSS in reaching all of the situations where you need styles to apply, it's likely that element queries can simplify and standardize your solutions and allow you to more easily re-use your code from layout to layout.

Often, custom layout-specific fixes are fragile and hard to re-use from template to template. But responsive support added with element queries is easier to move around from layout to layout than media queries are, so holding your styles in element queries can be a big time-saver when building layouts in a modular way.

### Write Futuristic CSS

Another reason you'll love element queries is the new ways in which style scoping can allow you to select elements. For years, people have been begging for a [parent selector](https://hashnode.com/post/a-parent-selector-for-css-civy4zgiz0tyj4v5376cx9qo4) in CSS, but with scoped styles, that's only the beginning. With new element-based units, you can finally have [responsive `border` widths](http://codepen.io/tomhodgins/pen/YNKVMQ) that [scale with the element](http://codepen.io/dirtyredz/pen/bgbdKK) to create [responsive CSS shapes](http://codepen.io/GollyJer/pen/xRaNBO).

The most fun part of designing with element queries is that it feels like time traveling to the future. It feels five years ahead of the CSS supported in browsers today, and because of this, a lot of the problems and pain points of today's CSS are easy to work around!

## How to Get Started

Head over to the [element queries website](http://elementqueries.com) to check out the plugin, read the [element queries spec](https://tomhodgins.github.io/element-queries-spec/element-queries.html) to understand how the syntax works, and head over to [Codepen](http://codepen.io/search/pens?q=eqcss&limit=all&type=type-pens) to view demos built with element queries to see what's possible with style scoping, element queries, and the new selectors and units that they make possible.

Hope you enjoyed reading the article. Feel free to let me know what you think in comments below.


Why I Love Element Queries & You Should Too!

Product

Explore

Company

Blogs

Partner with us

Support

Comparisons

Comparisons