Posted 4 months ago. Visible to the public. Repeats.

BEM naming conventions

We structure our CSS using the BEM pattern.

Our naming convention for blocks, elements and modifiers has evolved over the years. This card shows our current style and various alternative styles that you might encounter in older projects.

The difference between the various styles are mostly a matter of taste and optics. I do recommend to not mix styles and be consistent within a given project.

Current convention

Our current BEM naming convention looks like this:

Copy
<div class="user-info -pro"> <img class="user-info--avatar" ...> <div class="user-info--name"> </div>

Note how the modifier just starts with a dash (-pro). It is not prefixed with the block name. The modifier's block is always unambiguous due to the other class on the same DOM node.

This style was adopted from Nico Hagenburger.

Older conventions

Modifier prepositions

We used prefix modifiers with a preposition or helping verb, e.g. is-pro or has-child:

Copy
<div class="user-info is-pro"> ... </div>

We now just use -pro and -child.

Underscores

We used to separate words with underscores:

Copy
<div class="user_info is_pro"> <img class="user_info__avatar" ...> <div class="user_info__name"> </div>

We now use dashes (-), which feels more CSS-y.

What other teams do

There are a lot of different BEM naming conventions out there.

A common convention separates elements with double underscores (__) and modifiers with double dashes (--):

Copy
<div class="user-info user-info--pro"> <img class="user-info__avatar" ...> <div class="user-info__name"> </div>

Because of its popularity you might encounter this in an external codebase.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Henning Koch
Last edit:
4 months ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more