Unicode Characters for Class Names

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don't think I had seen it before and it's a bonafide "CSS Trick" so I thought I would share.

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
A.A. Bondy
<em>I Can See The Pines Are Dancing</em>
</div>

.♫ {
display: block;
background: #eee;
padding: 5px;
}

Pretty cool eh? I'd call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But...

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn't run it just sits there as text.

That ain't right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like "container" or "box" style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don't have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'

Roger, you’re right. It isn’t really practical or semantic, just kinda fun. I don’t agree that the ♫ is a more semantic way to mark up artists and song titles. If you were actually marking up a musical score maybe (somehow?), but not the labels used to identify musical pieces.

What about the section symbol § though? Would that be an appropriate alternative to the word section?

The traditional argument is that a class name like “left” is non-semantic because it’s presentational. That thing that it wraps may not always be on the “left” side. A better name would be “sidebar”, because that may better describe the content inside it.

A music note as a class name for a div wrapping information about music seems awesomely semantic to me. What is “presentational” about that?

“sidebar” is only marginally more semantic than “left”. Sidebar still implies position and visual interpretation of content, rather than actual content. “sidebar” tells me nothing about what is IN that element, it tells me what it should be.

A music note as a class name for a div wrapping information about music is certainly semantic in spirit, however to a code editor it is entirely inaccessible. It relies on interpretation of the symbol, intellectually and potentially audibly if someone has sight problems.

You’re developing sites semantically for accessibility, and then make the delicious irony that the editing and reading of your code itself isn’t accessible to all? It’s creative but practically just seems ridiculous, even on the base level of how the hell someone finds that character on their keyboard without using copy and paste.

Cool trick. I use symbols like !?+~ for short, special classnames, like the pipe character (“|”) for vertical dividers. Then I escape the character in CSS (“.\|”). Works fine in Javascript too, and in jQuery (but not Dojo unfortunately).

Chris – can’t wait until you come back and have to modify some code you’ve written using this “trick” six months from now… you’re going to hate yourself when you try and remember the keystrokes for ♫ as opposed to ♣.

That being said, the PHP executables don’t support UTF-16. Save your source document as UTF-8 and you should be fine. If you examine the source for your demo, although you’ve set the meta header to UTF-8, the document itself is still actually in UTF-16.

I’m with Blake. Part of the engineering tradeoff in writing code is maintainability. Non-textual names are cute and novel, but it’s not clear to me they are better.

One of my software engineering teachers claimed that source code (and this would apply to CSS also) is a medium for the original developer to communicate with all the future maintainers of the code, and that the behaviour of the computer on executing the code was a side effect.

I don’t see it as semantical at all. A pair of eighth notes can represent so many things. An artist name? A song? An artist name and a song? An album? A rhythm? If you have to look at the context it is being used in to find its meaning, it isn’t semantic.

If the □ can mean a box, container, or a clear fix, then it isn’t semantic.

The problem with using pictures for semantics is they can be interpreted differently by other people. Seeing a □ isn’t going to provide anyone, but the page creator, any information. They have to look at the elements around it to get an idea of what that class is supposed to do. Contrast that with a class name of clearfix – you know without a shadow of a doubt that that class is a clearfix.

I disagree again here. I think “clearfix” is incredibly non-semantic. How does that help describe the content it contains? It absolutely doesn’t, it’s purely a presentational fix. Describing without specifying is what I think semantics is all about.

Because a music note is a symbolic representation of music and symbolic representation = semantics. I am not the only person on Earth that knows that, so it’s not “me and me alone”. If I had two pocket folders on my desk, one of them had a cross on it and the other one had a music note on it, which one do think I’d keep my sheet music in?

You’re making the assumption that I know you keep sheet music in a folder labeled with a pair of eighth notes.

I know nothing about you. If I were to look at your desk and see two folders, one labeled with a cross and one labeled with a pair of eighth notes, I would start making assumptions about your faith and your musical background. The folder with a cross could contain scripture, sermon transcripts, pictures of fellow church-goers, church bulletins from the year 2000. I can look around your office/room, and try to discern exactly what the folder contains, but I know nothing of that folder until I look inside it and see what exactly you keep in a folder labeled with a cross. It’s clear to you because you know exactly what is in the folder. To me it’s a folder with a picture on it, and I have to look at contextual clues or look in the folder to find out exactly what the folder contains.

I agree that musical notation is a universal representation of music, but a pair of eighth notes tells me nothing of what you keep in the folder labeled with the notes. It could be sheet music, it could be papers that you have to grade from a theory class, it could be lyrics to songs you like, or it could contain a detailed list of the CDs, cassettes, and MP3s you own. I don’t know what it contains until I look inside it. Generically, yes, I know it pertains something to music, but that’s all I know from looking at the picture. If the picture was semantical, I would have no trouble discerning the exact contents of the folder.

You make the assumption that someone knows what a picture means to you. In doing so, you make the reader/maintainer have to assume the contents by looking at contextual clues or by looking at the contents of the container.

well yes, a note symbol is more semantic, if you’ve completely insane. actually (seriously) a note symbol is loosely associated with anything related to music. thus song-lyrics or song-title are much better class names than a utf symbol for a note. maybe using a note symbol was a horrible example of a generally good idea. but maybe it’s akin to a html/css editor that uses syntax coloring as well as coloring all the hex color codes. a bit over the top for me.
btw the horrid box css should hopefully disappear one day, to be replaced by something that does more presentatonal things like svg. sorry chris–i’m not insane and talking to myself–the box/note should be replaced by utf for a great white elephant. good to stimulate such discussion though.

seems we’re back to kindergarden!
don’t get me wrong, I like the idea. also a great way to make your sitebuild frustrating to the coder, and vice verse, not to mention the multis employing a broad range of nationalities, the different natural write symbols can get frustrating as well =]
so, it would be funny to use chinese names and symbols…
c’mon, get serious!

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.