Starting class names with numbers

I’m probably not the only one who learned the hard way that CSS (or JS) class names can’t start with a number. It’s just one of those things: .1-col has to be .col-1, or .one-col. Classes have to start with a letter, underscore or hyphen.

I’m not sure why I find this so fascinating to think about; but a simple workaround would be to use Roman Numerals. Roman Numerals are letters (I, V, X, L, C, D, M), and so really you can do whatever you need to with these CSS naming wise.

This came to me after a discussion with my fellow Front End Dev Tim about why we’d even need to use Roman Numerals any more. Not sure why, but I blurted out CSS class prefixing without even thinking about it!

Here we can see it in action:

.I-col, .II-col, .III-col, .IV-col, .V-col

Not sure why I love this so much.

Naturally, after Googling this I see I’m not the first to think of it. I was delighted to discover that some thought has been put into JS for sorting by this.