[wtf_srsly]

That's just a hack using css custom properties that still requires a global css file to define all breakpoints on the html element.

Also, how does it work for pseudo elements, state selectors etc. ? I can just see examples for media queries.

In my opinion it's also not really nice to read, just look at the example on his github page https://github.com/propjockey/css-media-vars.

Do you really think this is easier to read than normal media queries ?

[tobr]

Yes, you still need a CSS file or <style> tag to set up the breakpoints, but it’s going to be tiny and not something you actively work in unless you want to add a whole new breakpoint.

I also agree that it’s not particularly easy to read, but since the whole premise is that you are writing components, you can simply abstract away this ugliness in whatever way makes sense to you.

The result is similar to various CSS-in-JS solutions, but conceptually simpler: instead of having a library that has to manage inserted stylesheets and generated class names, you just generate (uglier) inline CSS directly. It also makes static HTML output trivial, without any of the fragile build process used for CSS-in-JS - all you need is that one static CSS file and the generated inline style attributes.