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.

 
  • Nice idea Ben, however I need more convincing that this is a technique that helps with maintainability and readability.

    In my view the class names should be self-explanatory, I also think that I would prefer to swallow most of those classes within Sass.

    I would be very interested to see a bigger working example, do you have anything on github that reflects this?

    • Sure, a one liner example won’t demonstrate this technique so well. This blog theme is on github (https://github.com/beneverard/beneverard-v3) but is quite simple, I developed this site (http://www.girlsnotbrides.org/where-does-it-happen/) which demonstrates the technique more appropriately (inspect using dev tools).

      Class names should be self-explanatory, even if they are I still believe grouping them makes scanning through HTML far quicker and easier.

      Have you watched through Harry’s Big CSS talk? I’d certainly recommend it, his idea of making the markup do the work by using more classes is a great idea, it makes modifying the style of a site much easier, especially if you’re working on a team… I’m not sure I’d want to let a pre-processor take any of that away.

      Thanks for commenting Kristina :-)

  • Have you tested this? Seems like a novel idea as long as there aren’t any browsers that fall over because of it, I’d imagine its probably safe but still worth testing.

    • Hi Steve, I’ve tested a lot of browsers and have yet to see any issues whilst using this. The slash is seen as a unexpected character, and as such, ignored.

  • Using slashes?! YOU MAVERICK!!! ;)

  • molovo

    Actually, classes starting with numbers aren’t ignored, you just need to escape them in the CSS like so:

    .31 st-person {
    /* CSS Here */
    }

    • Why should you want to go through that if at all it works

  • ilovecoffee

    What about jQuery? Do jQuery’s functions such as addClass, removeClass, etc. properly?

    • beneverard

      Yes they work just fine :-)