3 ms·

I agree with this. Media queries are a tool that eliminates the need to maintain separate HTML templates for mobile- or tablet-specific versions of a website. T

I agree with this. Media queries are a tool that eliminates the need to maintain separate HTML templates for mobile- or tablet-specific versions of a website. They work well at this task. Element queries as described by the author address an entirely different set of concerns, which is that modular components of HTML might be re-used in varying situations, and depending on the implementation you might want to style them differently. Media queries are the wrong tool to solve this problem. The problem is that when we want to use this: .testimonial (max-width:27em) {font-size: 0.8em;} We have to use a context-specific style definition instead: .testimonial {font-size: 1em;} .signup .testimonial {font-size: 0.8em;} Or, better (from the parent): .testimonial.vertical {font-size: 0.8em;} .testimonial.horizontal {font-size: 1em;} You might still have to revisit each of these styles in a media query to apply changes depending on the global presentation. So while the proposed element query might eliminate the need to chain selectors, I do not believe that it simplifies media queries in any meaningful way.

Wintamute 14y ago
No, the problem is with your class names .testimonial.vertical .testimonial.horizontal By including those classes in the actual markup you're hard-coding semantics about the presentation of those two elements that may cease to be relevant when the screen changes width. What if when the screen gets sufficiently narrow you want the horizontal layout to actually change to vertical? The breakpoint at which that happens is more closely linked to the size of the element than the global size of the whole screen (which media queries relate to). So the point is that with element queries you're defining modular breakpoints that directly relate to your CSS modules, not the global size of the screen, and you're not polluting/complicating markup with CSS class names that could become non-semantic in drastically differing viewport dimensions.

Wintamute 14y ago

No, the problem is with your class names .testimonial.vertical .testimonial.horizontal By including those classes in the actual markup you're hard-coding semantics about the presentation of those two elements that may cease to be relevant when the screen changes width. What if when the screen gets sufficiently narrow you want the horizontal layout to actually change to vertical? The breakpoint at which that happens is more closely linked to the size of the element than the global size of the whole screen (which media queries relate to). So the point is that with element queries you're defining modular breakpoints that directly relate to your CSS modules, not the global size of the screen, and you're not polluting/complicating markup with CSS class names that could become non-semantic in drastically differing viewport dimensions.