Seminar: CSS Class Naming & BEM

This post relates to my seminar presentation on CSS Class Naming & BEM.

Generally, in contemporary CSS naming, we should remember to do a few things:

  1. Improve naming so that everyone understands (not just team members)
  2. Keep in mind that other’s are looking at your work, so make naming as understandable as possible
  3. Keep naming consistent within a team, as if one person typed it
  4. Avoid over-engineering and prematurely optimising code
  5. Avoid bloating markup
  6. Check your work after finishing! You will have to change class names
  7. When in doubt, always use comments

However, there are also some specific do’s and don’ts of CSS class naming. I will outline a few below, but you can find more here.

I’ll start with the don’ts…

DON’T:

  • Afflict your website with classitis (term from Jeffrey Zeldman in Designing with Web Standards, 1st ed.), this means do not use too many unnecessary classes. Check out CSS selectors to see how you can target some elements without classes.
  • Use capital letters or camel case. Camel case should be used in JavaScript not CSS.
  • Use presentational names if you don’t have to:
.green-button { }
  • Try to avoid content-based names if you can because they change. Try something abstract instead:
.intro.text { } /* DON'T */
.entries { } /* DO */
  • Abbreviate apart from the classics: .nav (navigation), .txt, .url, .btn (button)
  • Use more than two words:
.dropdown-button-part-one { } /* DON'T */
.dropdown-button { } /* DO */
.button { } /* DO */

DO:

  • Use natural language
  • Use functional class names (not always possible):
.positive-button { }
  • Use content to think of a name:
.header-logo { }
  • Use nouns to name objects and modules:
.menu { }
.button { }
.textbox { }
  • Use adjectives to name states of an object:
.left { }
.right { }
.block { }
  • Name parent-child relationships
.tabs { }
.tab { }
header [role=banner] { }

A List Apart outlined a few common markup problems. These are just useful to note in terms of optimal CSS class naming.

And here are some frequently used classes. This is just good to know:

.tabs
.dropdown
.thumbnail
.media
.label
.button or .btn

Now that we’ve mentioned good practice of CSS class naming, let’s talking about BEM, SMACSS and OOCSS.

What is BEM, SMACSS and OOCSS? And what does all that mean?

BEM stands for Block Element Modifier. SMACSS stands for Scalable and Module Architecture for CSS. OOCSS stands for Object Oriented CSS.

BEM, SMACSS and OOCSS are structures to naming our CSS classes. They apply to all projects and make working in large groups easier. They make you think in objects. Objects are small pieces of functionality such as headers, footers and content areas.

I will provide a general overview of all three of these structures, however I will only go in depth with BEM. These structures can be used together or seperately. Just make sure you understand what you are using and why. And remember you don’t have to use these structures if your project does not call for it, again try to keep your markup lean!

SMACSS

SMACSS categorised CSS rules and uses these categories to target specific areas. The SMACSS categories are:

  • Base (html, body)
  • Layout – divides page into sections (main, section, article)
  • Module – the reusable parts of your markup (p, h1, ul)
  • State – how it will look (hidden, active)
  • Theme – most sites don’t require this layer, it describes how modules or layouts might work

OOCSS

OOCSS focuses on reuse and using less code. A major OOCSS concept is “skin”. The “skin” of a website it it’s colours, subtle uses of gradients and/or visible borders. It is basically the overall design look of the website. OOCSS uses the “skin” to repeat styles on a webpages so that with some planning, you can do something like this:

.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
}

If used correctly, this could be really useful to reuse and keep your markup light. However, for small projects this approach could be overkill.

Before I continue on to BEM, I’d like to summarize what you can take away from SMACSS and OOCSS. They may seem like something you wouldn’t use unless you’re working on a large project, but there are some things you can use right now.

This is what you can (or at least I will) take away from SMACSS and OOCSS:

  • Try -like for reuse:
h3, .h3-like { }
  • Name your states:
.is-activated { }
  • Use prefixes. For example if you have an object, use “o” as a prefix:
.o-button, .o-grid { }

Ok, now let’s talk about BEM.

BEM – What?!

BEM was invented by Yandex. There is no specific implementation of this structure. It is meant to just make your life easier (not harder!), so do what works best for you. BEM is used in major websites like BBC. It can only be used on classes (not ID’s).

This structure focuses on 3 main components: block, element and modifier:

  • Block: an element that encompasses related elements (example: navigation)
  • Element: a composite part of the block that can’t be used seperately from it (example: item)
  • Modifier: controls the state, appearance and behaviour of the block or element (example: active)

Here are some things you need to remember about BEM:

  • Blocks don’t have to have elements
  • Blocks can have nested blocks
  • Blocks can have nested elements
  • Elements have to have blocks

Ok, cool. So how do I use BEM? It’s pretty simple actually (unlike the explanation).

  • You use a double underscore (__) between your blocks and elements
  • You use a double hyphen (–) between your elements and modifiers

Like this:

.navigation { }
.navigation__item { }
.navigation__item--active { }

You may think that looks kindof weird. But BEM gives you a consistent way of writing class names that everyone will understand. It also tells you how elements are related to each other, gives semantic freedom and makes it clear what the HTML structure looks like.

There are a number of benefits to BEM:

  • Transparency and clarity in markup
  • Emphasizes readability and avoiding collisions
  • Applies to all projects
  • Makes working on large projects easier
  • Easy reuse of code
  • Can be a quick way to deliver prototypes
  • Suitable for any programming language or framework

You can easily reuse these BEM CSS class names in JavaScript, for example. This avoids confusion.

.menu__item--visible /* in CSS */
menuItemVisible /* in JavaScript */

But before you start BEMing, there are some things to consider.

  • Make sure you plan what you can use as BEM modules
  • Don’t enforce it strictly, don’t let it restrict you or make you feel like you have to use a strange pattern
  • You can use BEM along with SMACSS and OOCSS, don’t restrict yourself!
  • If this blog post makes you think about it, try it

Here are some links to check out for more knowledge:

Leave a Reply

Your email address will not be published. Required fields are marked *