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.