Using slashes within the HTML class attribute

Since discovering grids, OOCSS and the like I’ve found writing CSS far easier, but perhaps more importantly, writing CSS that makes sense.

Harry Roberts said in his Big CSS talk that we should defer more work to the HTML, using more classes in the markup to make a site easier to maintain for developers.

I really subscribe to this idea, however, I have found that having loads of classes pilled in the class attribute can get a little messy, even while using class naming conventions (have a read up on BEM).

To try and remedy this issue I’ve started using slashes in my class attributes to split groups of classes. To demonstrate, here’s a container of which has many classes:

<div class="col m_4 t_6 d_8 country-list box box--rounded box--semi-transparent box--bottom-texture">

And here’s the same container with the classes grouped appropriately:

<div class="col m_4 t_6 d_8 / country-list / box box--rounded box--semi-transparent box--bottom-texture">

It may only be a small change but after letting this little technique mature for a few months within my workflow I’m reluctant to give it up.

Perhaps you should try the same, give it a go and let me know how you find working with this technique.

Update:

Some people have asked me whether browsers will fall over using this technique. The short answer is no, I’ve been using this technique for about 6 months with no issues.

The longer answer is this, the HTML spec doesn’t list slash as an accepted character, so what happens when a browser finds an unaccepted character in the class list? It would appear that when an unaccepted charcter is found that class in the list is ignored, much like the class 1st-person is ignore because it starts with a number.

As a final point I’ve also tested this JSBin on many versions of IE, Chrome, Safari, FireFox and Opera on Browserstack… with all styles applied as expected.