I use BEM – A good clear naming convention

It’s not the most exciting skill in the world, but I like to think I’m pretty good at naming things. That’s because it’s so damned important to be clear and concise, or you risk confusion.

That’s why I use BEM.

Bem is great, although can get a bit wordy with massive long class names. But I try not to let it. It’s great because you can declare a reusable component, for example:

search {}

search__input {}

search__btn {}

search__label {}

And then use a standard BEM modifier (“–“) to make alternate versions, just by adding a new class:

search–vertical {}

…inheriting most of the styles but adding some overrides.

The best thing about BEM though is the specificness, and you’re absolutely certain the class hasn’t been used elsewhere. For example if I found a class like “full-width” I wouldn’t dare touch the css for it, in case it was inherited by something else tucked away on the website. But I know that “search–full-width” It’s pretty clear what that class is for and where it’ll be used. It’s just clear naming really.