Media queries reasoning

[ArekBartnik]

I'm curious about decisions regarding MQ breakpoints. Especially why xxx-n-above and xx-n-below are overlapping?

This overlap is confusing for me. If I start from the mobile and go up everything is predictable. --xs-n-above for the small mobile view, --sm-n-above for the large mobile view, --md-n-above for the tablet view, etc.
But I can't use the --md-n-below query to style the large mobile view because the styles are also triggered for the tablet view (768px).

Wouldn't it better to change all xxx-n-below from x <= width to x < width and xxx-only from x <= width <= y to x <= width < y?

[argyleink]

maybe! they're called medium and below, <= saying it's equal to and below it. your saying you'd prefer if it was just below, like <? i hear that. i'm confused tho why a --md-n-below conflicts so much with the tablet view in your example. the cascade and putting it later in the stylesheet doesnt help you manage the winning style?

[ArekBartnik]

If you use xxx-n-above to style everything on your page, except for "this one component should only look like this for the mobile", than you can't achieve that with xxx-n-below without explicitly reseting "below" styles for this component in xxx-n-above screen.

In an example below .text in the component on an iPad (768px) is font-size-1 but I wanted to change all .text to font-size-2.

.text {
  font-size: var(--font-size-0);
  
  @media (--md-n-above) {
    font-size: var(--font-size-2);
  }
}

.component {
  @media (--md-n-below) {
    .text {
      font-size: var(--font-size-1);
     }
  }
}

[argyleink]

I made a demo here https://stackblitz.com/edit/vitejs-vite-uu4zax?file=style.css and i think your issue is with nesting syntax and not the media queries? you need an & in there or else the nesting plugin fails to build the selector you want:

.component {
  @media (--md-n-below) {
     & .text {
      font-size: var(--font-size-1);
     }
  }
}

[ArekBartnik]

Thank you for the demo. Yes, I've made an error with the nesting. Fortunately, it is illustrating the issue I have with Open Props' MQ.
If I apply those styles I would get:

	0-767px	768px	769px ->
.text	--font-size-0	--font-size-2	--font-size-2
.component .text	--font-size-1	--font-size-1	--font-size-2

and I wanted:

	0-767px	768px	769px ->
.text	--font-size-0	--font-size-2	--font-size-2
.component .text	--font-size-1	--font-size-2	--font-size-2

I can get to this result with Open Props but I would need to repeat all MQ for .text in .component .text.