It's funny you should ask me this while I've been stewing over the questions of “What are the Do’s and Dont’s of Event-Driven Virtual Stylesheets?” for a site I'm writing on the topic of responsive styling techniques.
I think this answer applies to element queries, plus a whole range of other exciting styling techniques where you're using CSS and JavaScript together!
Cautions about JS-powered Styling
- Any time you are using JavaScript to help apply styles it will be slower than CSS alone. Therefore: do everything in CSS that can be done in CSS
- When using JavaScript to apply styles, performance is determined by how complex the tests are to perform, and how many elements in the page need to be tested. Therefore: try to write your styles in a way that limits the number of JS-powered tests being performed to determine what styles to apply, and try to limit the number of elements in your HTML being probed or tested by a JS-powered stylesheet
- The other factor to performance of any JS-powered styling is understanding which events trigger recalculations of the styles. You want the styles to stay current with things happening in the browser, but you also want to limit the number of event listeners running at any given time, which is where it's really important that you limit the number of elements these tests are applying to in the last tip. If you're using a UI library there might be events and callbacks built right in to your framework that you'd want to trigger recalculations in your JS-powered styles. Therefore: be aware of what event listeners will be present in your browser on the page where the JS-powered styles you are writing will be running and try to find ways to limit the number of event listeners needed: limit the number of elements you're listening to, hook similar listeners into global events, use framework-specific events for tighter integration, and consider using new browser APIs like Resize Observer and Mutation Observer as well if they help.
I'm currently building website that documents 25 responsive techniques that go beyond what CSS can do, and I'm hoping to also explain how each technique works in simple enough terms that you can implement support for them in JavaScript yourself… I'll be very happy when it's complete enough to share with everybody :D