Elementary.

A CSS workflow for mimicking element queries. [c]2014 @scottjehl, @filamentgroup. MIT license.

View project site here: Elementary on Github

How to

1. Give an element a class of mod and whatever other classes you might need for styling it.

   
   <p class="mod mod-foo">...</p>
   

2. Claim that element’s potential element query breakpoints in your CSS by setting its :before selector’s content property value with space-separated numbers, like this:

   
   .mod-foo:before {
      content: "300 450 620";
   }
   

3. For all elements with this "mod" class, a little JavaScript will set and maintain (on resize) a data-minwidth attribute on them containing a subset of the widths that are less-than-or-equal-to the element’s own width. You can use that to write selectors like this, which says, “if the data-minwidth attribute contains the 450”:

   
   .mod[data-minwidth~="450"] {
     background: blue;
   }
   

That’s about it. Here’s the CSS for the sample element on this page:

.mod-foo:before {
  content: "300 410 500";
}
.mod-foo {
  background: green;
  color: #fff;
  padding: 20px;
}
.mod-foo[data-minwidth~="300"] {
  background: blue;
}
.mod-foo[data-minwidth~="410"] {
  background: red;
}
.mod-foo[data-minwidth~="500"] {
  background: gray;
}