"Element Queries" is a third-party JS library, which allows you to have CSS events on elements (instead of the whole screen, as is the case for Media Queries). It introduces additional dependencies and performance overhead, but at the same time can make responsive behavior easier to design (especially if you cannot use flexbox and grid, yet). Personally, I would try to get started with Media Queries, and if that's not enough, add Element Queries.

The creator of Element Queries is an active member on Hashnode (YaY; Tommy Hodgins ) and I invited him to join this discussion :)

Hey Mahesh! I haven't done very much with React, but I work with element queries every day and have released a few different plugins that enable you to build with element queries.

The biggest difference between media queries and element queries are that CSS media queries are part of the CSS standard and have excellent support (and blazing fast performance) in all browsers. On the other hand, 'element queries' describes a concept of setting breakpoints on individual elements on your page - something CSS cannot do natively yet. The only way to build with the idea of element queries is by using JavaScript, but if you're using React - half of that work is done for you already :D

It's best to use CSS media queries anywhere you can for the better performance. If you think of a website's layout in terms of many small components, which fill holes in a larger layout. I would try to create the larger layout that the components fit into using media queries, and then use element queries at the component level so I could tie my responsive breakpoints to the width/height or other properties of each component.

As for what plugins work - I have written a couple myself that can work with React:

EQCSS is one that uses a non-standard CSS syntax for writing styles. These styles can be colocated right inside your JS component and don't require a workflow where you're dealing with CSS files at all. There is a little hooking up to do to ensure that the EQCSS.js plugin runs after your components have updated so this is a flexible solution you can use outside of React as well as make to work inside React, but it's not React-specific at all. Another potential downside - EQCSS (as far as I can tell) 100% replaces the need for using 'CSS Modules' in your workflow, as it also offers an even stronger sense of 'style scoping', so trying to make EQCSS and 'CSS Modules' work together would be less ideal than having EQCSS replace CSS Modules and add element queries and a bunch of other features.

@element .myComponent and (min-width: 500) {
  $this h2 {
    font-size: 24pt;
  }
}

Here's a link with a ton of EQCSS demos to show you what this plugin can help you accomplish: EQCSS on Codepen

CSSplus Selectory is a slightly different concept than most CSS tools - it's a 'Selector Resolver' using JavaScript. It allows you to write a CSS selector with a JavaScript-based test, and it will attempt to run that test on every element that CSS selector applies to (scoping). If the test passes, that CSS rule gets applied to the passing elements. One benefit to Selectory's syntax is that you can use it with CSS Modules. It does have a much weaker sense of scoping (it will only apply to elements passing the test) so in some cases it would be 'enough' and in others I can see why you might want the unique identifier CSS Modules provides.

.myComponent[test="this.offsetWidth > 500"] h2 {
  font-size: 24pt;
}

Here's a little roundup of some of the things that Selectory can help you accomplish: Selectory on Codepen

There are plenty of other plugins for element queries and container queries as well. When I asked Twitter for React-specific ones people gave me links to:

• ZeeCoder's container-query plugin
• ELQ React Responsive Block
• And another good element query plugin that is wrapped in a few ways to work with React is @ausi's cq-prolyfill

I hope that helps point you in the right direction <3