argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Home Page:https://open-props.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Inconsistency in Naming of Custom Media Queries for Size Ranges

watarutmnh opened this issue · comments

Hello,

I was reviewing the custom media queries defined in the CSS, and I noticed an inconsistency in the naming convention used for the size ranges. Specifically, the naming for the --xxs-n-above and --xxs-n-below queries seems to be misrepresenting the actual size ranges they cover.

Here's the relevant code snippet:

@custom-media --xxs-only      (0px <= width <= 240px);
@custom-media --xxs-n-above   (width >= 240px);
@custom-media --xxs-n-below   (width < 240px);

The --xxs-n-above query is defined as (width >= 240px), which technically covers the range of "XS and Above" rather than "XXS and Above" as the name suggests. Similarly, the --xxs-n-below query covers the range of "XXS and Below", but the name might suggest it excludes the XXS range.

I would like to propose a revision in the naming convention to accurately represent the size ranges each query covers. For instance, renaming --xxs-n-above to --xs-n-above and adjusting other similar query names accordingly would provide a clearer understanding of the size ranges they represent.

nice, i'm down to see your proposal. i agree the naming could be clearer.