This is a fun little item that I found over the weekend. I work in SMACSS/OOCSS-style and have been racking my brains trying to figure out a way to separate base classes from extender classes from related-but-independent classes in CSS. Many are making the move towards BEM-style class naming and Harry Roberts offers a very justified argument as to why he uses it. I think it works, but I wanted to see if we could improve it a bit.

So, I poked around a bit on the internets this weekend and, remembering a talk that Paul Irish gave on the use of UTF-8 characters in HTML and CSS, I began to think about applying special characters more systematically to modular class names. Here's what I found…

• CSS character escape sequences | Mathias Bynens
• Using character escapes in markup and CSS - CSS escapes | W3.org
• 4.1.3 Characters and case | W3.org
• G.1 Grammar | W3.org

Okay, I don't really expect you to read all of those just to get through this brief article, so here is the part that I was particularly excited about…

“The following characters have a special meaning in CSS:
! " # $ % & ' ( ) * + - . / : ; < = > ? @ [ \ ] ^ ` { | } ~.”

The above characters can be escaped with a leading backslash (\). So, if say, you want to use “+” within a class name, you would escape it as (\+). In the HTML, you would just call that class using the unescaped character “+”.

base\+ext { property: value; }

<element class="base+ext"></element>

Yeah? So what. It may sound gimmicky, but lets put it into the perspective of modular class naming. If you use the pattern of base class/sub-class, you probably include the name of your base class in the name of your sub-class. With character escaping, we have a vocabulary of characters to extend this “syntax”.

Why not use BEM-style? Harry's already done the work in explaining its use. Yes, he has. And it is very well-explained. I'll call “personal preference” on this one. At my current job, we have updated the CSS to move away from underscores to using hyphens. Mixing both in a newer convention would be confusing and make any legacy styles even more difficult to update.

What about doing a search to find class names in the CSS? Yes, it is true that, if you adopt this, you will have to be constantly aware of the class names not being exactly the same in the CSS as they appear in the HTML. But I think the payoff of reading the style in the mark-up with a more robust character set will override the differences in CSS.

What’s the browser support? You might be surprised. I tested in Chrome, Firefox, Safari, Opera, and IE9-IE7 on both Mac and Windows. No were issues found. Pretty neat, huh?

Anyways, this is just a quick ‘n dirty on the subject. I have a test page here. Please share your thoughts in the Comments below.

Cheers!

← Back to Notes