Suggestion for naming breakpoints

[Elbone]

My colleague wants to be able to pass an option to set the "breakpoint-" prefix as she likes to use all caps class names for the media queries, which to be honest is not a bad idea as it visually identifies the media query.

To continue the configuration paradigm perhaps it could be a meta tag: <meta name="breakpoint-prefix" content="BP_" >

It could also allow us to use such values as @media-. This will be targeted in css with .\@media-tablet .selector { } making it immediately recognisable as a (non-standard) media query.

[Elbone]

eg: https://gist.github.com/Elbone/e5b79f02d7e77851aca5 https://gist.github.com/Elbone/b9bffeffe79a3ada3221

[benschwarz]

I'm not 100% convinced by your proposal (or using @media)… BUT, it is an interesting parellel to the custom media queries specification.

[geelen]

Nice idea, but using @ in class names gives me the heeby jeebies :)

Personally I find .breakpoint- to be a clear enough signal throughout the CSS, but I can see how you might want to use a different style

On Tuesday, June 24, 2014, Niels Oeltjen notifications@github.com wrote:

My colleague wants to be able to pass an option to set the "breakpoint-" prefix as she likes to use all caps class names for the media queries, which to be honest is not a bad idea as it visually identifies the media query.

To continue the configuration paradigm perhaps it could be a meta tag:

It could also allow us to use such values as @media-. This will be targeted in css with .\@media-tablet .selector { } making it immediately recognisable as a (non-standard) media query.

— Reply to this email directly or view it on GitHub https://github.com/benschwarz/metaquery/issues/21.

[Elbone]

I know what you mean @geelen but I figured the option to use a custom prefix is the key feature. I personally would just use all caps. It's just more scannable and makes the selector stand out to other devs as being unusual.

[benschwarz]

The other thing you could do to make the selector standout, is qualify the selector to :root or something like that.

:root.breakpoint-handheld {  }

---

Otherwise, I'd be amenable to a PR that added the ability to set a prefix… could be done on a metatag just like the rest of metaquery, but a direct JavaScript API would be fine too.

metaQuery.selectorPrefix = 'BP-'

---

Agree with @geelen's sentiments of @media giving a slightly uncomfortable feeling. Seems like a bad idea.

[Elbone]

@benschwarz @geelen Agreed! @media was a bad idea :-) See https://gist.github.com/Elbone/b9bffeffe79a3ada3221 for my quick implementation. I just chucked the prefix meta tag checking into the collectMediaQueries method. Obviously the ugly way.