0.4.0: media-specific class naming convention

[philipwalton]

I'm wondering if you've given any thought to formalizing a naming convention for media specific classes. I've noticed you have media specific component classes in the grid-layout module, but I don't see any mention of naming recommendations in the docs.

I imagine most of the time a media specific class would conceptually fall into the realm of utility classes (e.g., something that sets display:none or converts inline-block to block when the viewport is less than 30em), but as your grids exemplify, they may also apply to component classes.

After giving it a bit of thought I think a named media query prefix makes the most sense. The convention would be:

.[mediaName-]ComponentName { }
.u-[mediaName-]utilityName { }

If you named your media query hand to refer to anything less than 30em, then you'd get something like this:

@media (max-width: 30em) {
  .u-hand-hidden {
    display: none !important;
  }  
  .u-hand-blockList {
    display: block !important;
  }
}

Thoughts?

[lukasmlady]

In my experimental fork of the SUIT toolkit, I tried to address this feature. See responsive guide and an example here.

In short, the utility or component would be prefixed with a named media query like v[n]:

/* v2 breakpoint */
@media (min-width: 24em) {
  .v2-u-size2of5 {
    width: 40% !important;
  }  
  .v2-u-block {
    display: block !important;
  }
  .v2-Grid--3col > .Grid-cell {
    width: 33.3333%;
  }
}

There might be a variation like v[n]-only or v[x]-to-v[y]:

/* v2 only breakpoint */
@media (min-width: 20em) and (max-width: 23.9375em) {
  .v2-only-u-size2of5 {
    width: 40% !important;
  }  
  .v2-only-u-block {
    display: block !important;
  }
  .v2-only-Grid--3col > .Grid-cell {
    width: 33.3333%;
  }
}

/* v2 to v5 breakpoint */
@media (min-width: 24em) and (max-width: 41.9375em) {
  .v2-to-v5-u-size2of5 {
    width: 40% !important;
  }  
  .v2-to-v5-u-block {
    display: block !important;
  }
  .v2-to-v5-Grid--4col > .Grid-cell {
    width: 25%;
  }
}

As for the components as a whole, I don't think there are enough usecases.

I'm using this approach on a website and it works great so far.

[necolas]

Yeah, we're using this format at the moment:

.v2-u-isHidden { /* ... */ }

I'll get around to updating the documentation.

[philipwalton]

Perhaps this will become clearer after it's in the docs, but my first impression was that the .v[n] prefix seemed a little weird (and somewhat confusing).

When I first saw it in the grid-layouts file I honestly thought it was three different versions (like, software versions) of the grid. It was only after I started reading the CSS rules that I realized its purpose. Also, what does the v stand for? Version in the general sense? Viewport? It's a little unclear.

Secondly, my preference would be for the media query name to come after the u- prefix in utility classes. When scanning a list of classes in an HTML template, I think the most important distinction is whether it's a utility or a component. Its media type I believe is secondary, and should therefore come after the u-.

[necolas]

v stands for "variant". We've definitely found it easier to read all classes scoped to a Media Query by having the prefix rather than inserting it in the utility. Especially since there are already instances of utilities with 2 hyphens, e.g., u-linkComplex-target.

[necolas]

After thinking about this a bit more, I'm more in favour of the notation Philip suggested. The only existing utility class that uses an extra hyphen is u-linkComplex-target; it can be renamed to u-linkComplexTarget.

.u-linkComplex {}
.u-linkComplexTarget {}

Rather than names like hand, desk I'm thinking sm, md, lg:

.u-size1of2 {}

@media (min-width: 30em) {
  .u-sm-size1of2 {}
}

@media (min-width: 40em) {
  .u-md-size1of2 {}
}

@media (min-width: 50em) {
  .u-lg-size1of2 {}
}

[ry5n]

I had been feeling similarly dissatisfied with the v[n] prefix. On a recent project I tried out a pretty different convention, which might be interesting as food for thought:

.u-size1of2 {}

@media (min-width: 420px) {
  .u-size1of2\@md {}
}

@media (max-width: 419px) {
  .u-size1of2\@upto-md {}
}

I like the clarity of the resulting markup (but don’t love it). More importantly though, the need to escape the @ in CSS is an issue for the readability of the stylesheet.

[necolas]

Any feedback on this change @philipwalton and @MoOx? Have either of you been using another convention that is worth thinking about?

[philipwalton]

Yes, I like this change. It's actually the exact pattern I used in my last project, and I've had no issues.

And since my original suggestion, I've begun to prefer descriptors like sm, md, and lg to things like palm, hand, desk, etc., and definitely more than v[n].

+1

[MoOx]

I don't like to use device as name (stuff like palm, hand, desk, mobile etc). So for my concern, I am using modifiers like size-xs, size-s, size-m, size-l, size-xl.
For now I am really using that as modifier so I am suffixing classes with those name.

.u-size1of2 {}

@media size-m-and-up { /* I'm using rework-breakpoint */
    .u-size1of2--size-m {}
}

Here we can see it's a bit stupid with the size usage, but I dislike sm md & lg which remind me differents things than viewport size :)
Maybe view-s, view-m, view-l can do the job.

[AntonTrollback]

I also remember being a bit confused by the .v[n] prefixes.
The sm, md, lg scale is widely used and has the ability to be extended both up and down (xs, xxs).

[MoOx]

Maybe a least a vp- prefix somewhere ? To know what you are talking about ?
@AntonTrollback "widely used". Can you show me where ? I never saw this notation :)