CSS Quick Tip: The Valid Characters in a Custom CSS Selector

Using valid CSS selectors is easy, and usually, we initially know how to write one. Surely we can’t make mistakes selecting elements – because the naming cames from HTML – but what about the custom class or ID ones?

Using class or ID, we write our selector names and then using it with a dot or a hash prefix. Of course, we learned how a valid name should look like. But if you asked me about the compelling characters, I maybe could guess, but it wouldn’t have been accurate.

This topic is definitely worth our time in a quick recap. Also, note that in the naming there is much more today. Nowadays there is some creative way of the selectors, and the unique characters have more weight than ever.

Knowing all of this what should we know about our selector naming once again? Let’s see!

Bazar is a powerful "headless" Laravel e-commerce system.

A Basic Valid CSS Class Name

A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z) which is followed by any numbers, hyphens, underscores, letters. A name should be at least two characters long. Cannot start with a digit, two hyphens or a hyphen followed by a number.

Your selector will look something like this:

-?[_a-zA-Z]+[_-a-zA-Z0-9]*

There is one catch: the hyphen and underscore beginnings is reserved for the vendors, like -webkit-, -moz-, -o- or -ms-. You can use them, but it is bad practice.

With the prefix you will have the following structure:

'-' + vendor name + '-' + your selector name
background-image: -webkit-linear-gradient(45deg, red, blue);

.site-header { ... }
.site-footer { ... }

Knowing this we are at the point where we can make valid selectors starting with letters (like we usually do); this is not mean that you can’t make any other combination, but for the futureproof result, you should follow this.

As you see we have two “special” character in this stack which is hyphen and underscores. I’m sure you know at least a little bit about BEM (Block Element Modifier) which is a particular naming technique using double hyphens and underscores to separate the components ordered. This concept shows us how we can achieve complex and manageable selector syntax just by the “basic” values. For more information about BEM check out the project page.

.site-header__logo { ... }
.site-header__logo--dark { ... }
.site-header__navigation { ... }

Escaping and Unicode in CSS Selectors

We can also use any ISO 10646 and escaped characters; this is an interesting topic and not a coincidence that we don’t meet with it usually. Using ISO or escaped characters in most cases not the best idea because ofter it is unmaintainable. Check out this valid selector:

<div class="@@@"></div>

.\@\@\@ {
    background: blue;
}

Of course, as always there is a “but”. If you know the Tailwind CSS project, you can see escaped CSS selectors. In Tailwind the naming syntax often contains a colon:

<div class="sm:flex sm:items-center px-6 py-4">

.sm\:flex { ... }