# Element Queries ### Responsive Web Design's Unicorn [@bensmithett](https://twitter.com/bensmithett)
## Who knows CSS?
## Preprocessor (Sass or Less)?
## BEM ## SMACSS ## OOCSS
### We used to design & build pages
HOME
PRODUCTS
### We don't do pages any more
### We design & build **components**

HTML




  ...

CSS


.my-component { color: blue; }

JavaScript


$( ".my-component" ).doSomething();
STYLE GUIDE
Product Thumb
Comment
Mini Shopping Cart
HOME
## Responsive Components

Page : Device



Component : Container

How do we make a component
respond
to changes in its own size?

Window: Media Queries

Element: ???

Element Queries!

#### April 2013 ### [Media Queries are a Hack](http://ianstormtaylor.com/media-queries-are-a-hack/) ####by Ian Storm Taylor

Media Query


@media ( min-width: 1024px ) { 
  .my-component { 
    color: yellow;
  }
}

Element Query


.my-component:min-width( 600px ) { 
  color: yellow;
}
# :( ### Element Queries don't exist

why?

circular dependencies


.container {
  float: left;
}


.child {
  width: 500px;
}


.container:min-width (450px) > .child {
  width: 400px;
}
Limitations & challenges explained in ### [Element Queries](http://www.xanthir.com/b4PR0) ####by Tab Atkins (Chrome dev)

How to build Responsive Components?

Element Queries

iframes!


and Twitter, Google+, Disqus, YouTube, etc etc
  • Establish a new viewport
  • Regular Media Queries work
  • Size of iframe element isn't affected by size of child elements
  • No circularity!

Downsides

  • Performance
  • Don't inherit CSS from parent document
  • Makes JavaScript really annoying

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!

Fake Element Queries with JS

  • Watch element
  • Detect when it changes size
  • Update a class
class="my-component gt-600px"



(Note for anyone browsing these slides: refresh this page if you don't see a flashing gt-600px class. Something's broken & I haven't had a chance to fix it yet.)
``` .my-component { color: green } /* .my-component:min-width( 600px ) */ .my-component.gt-600px { color: yellow } ```

Downsides

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!


Ben's Kinda-Boring Recommended Solution™

Use BEM classes

We don't really render our components in infinite contexts...

...most of the time they'll only have 2 or 3 possible parent containers

...and you probably already know the breakpoints where you want the CSS to change 


.my-component,
.my-component--does-respond {
  color: green
}

@media ( min-width: 1024px ) {
  .my-component--does-respond {
    color: yellow
  }
}

It's cheating, but it does the job for now.

Responsive components:

Components that work everywhere where you need them to.

But what does the future hold?

Web Components

  • Isolated, sandboxed chunks of HTML, CSS & JavaScript
  • Only in Chrome so far
  • Polymer polyfill

Element Queries!

<viewport> solves circularity

Lots of discussion on W3C mailing list
## In summary... - Design & build libraries of responsive components! - Use [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) class names - We might get Element Queries one day!
# Thanks! I'm [@bensmithett](https://twitter.com/bensmithett) on the internet