Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistency in Naming of Custom Media Queries for Size Ranges #417

Open
watarutmnh opened this issue Sep 25, 2023 · 1 comment
Open

Inconsistency in Naming of Custom Media Queries for Size Ranges #417

watarutmnh opened this issue Sep 25, 2023 · 1 comment

Comments

@watarutmnh
Copy link

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.

@argyleink
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants