Introduction

With the rise of responsive web design and CSS preprocessors, the breakpoints were generally named phone tablet desktop to easily differenciate the devices on which the design responded to. But with the advent of so many devices it was clear that those labels were inadequate because the screen size doesn't really help us identify the actual device. Oh, let's not forget the horrendous phablet...

Actually it was never a good idea to target specific devices, simply because there's too many of them around and new ones come out every day.

Some steps ahead

With the latest version of Bootstrap, many adopted its standard for breakpoint names such as xs sm md lg xl and we see a lot of class names like .col-md-6 .col-sm-12 which are fine but I personally find them unintuitive.

T-Shirt Naming

Maybe I find the "Bootstrap way" unintuitive because I was already defining my breakpoints following the T-Shirt Naming xs s m l xl and my mind is already comfortable with these, so that things like md sm lg (probably defined this way to keep the 2 characters length) just feel out of place.

Welcome @ breakpoints

Independently of how breakpoints are named, I found that it is much clearer to target them by using the @ character in class names. Check the example:

<div class="col-12@xs col-6@m col-4@xl">...</div>

This way it becomes very readable and we can quickly identify the responsive classes. It's possible to go as far as targeting all the responsive-related classes at once with [class*="@"] {...}. The only small drawback is that the @ needs to be escaped with a \ in CSS classes:

.col-4\@xl { ... }

It's worth mentioning an example for the offset classes – very popular among grid systems – whose names can get as ugly as possible. Think of Bootstrap's col-xl-offset-4 which means offset by 4 columns on extra-large breakpoint. I'm not sure why it couldn't have been just offset-xl-4 instead of including the redundant col, but it's ugly anyways.

The @ can save readability once again, look at the example:

<div class="col-8@xl offset-4@xl">...</div>

Conclusions

Using the @ for responsive class names is the most readable way I've seen so far and probably the way to go to avoid ugly, unintuitive and needlessly long class names.


1,918 2 24