Naming modifiers

We’ve gotten this naming thing pretty much in the bag. But, what about blocks or elements that are only slightly different? And, what if we needed to modify the entire navigation? How would we name the element if we sometimes needed a white or transparent navigation within our website?

These questions could also be for examples like a red or blue button. These are all modifications of the block. Modifiers extend the style of blocks and elements. This extension can be quickly recognized in how modifiers are named.

The straight BEM way to add a modifier is to create a modifier class name by adding two hyphens “ — ” after the Block name. Using BEM with Webflow, we create modifier class names by adding an “.is” combo class.

For example:

.c-nav .is — white {

}

.c-nav .is — transparent {

}

The above example shows how to modify a block. We can also modify elements in the same way.

Remember, the element is a child element within the containing block. The .c-hero represents the Block, and .c-hero__text the Element.

As seen in the example above, we can use double hyphens like so:

.c-hero__text .is — small {

}

.c-hero__text .is — big {

}

Again, note the use of the double hyphens in the example above to show a modifier.

Now we’ve got it!

That’s how the BEM naming convention works.

Pro tip: Keep class names short. Only use acronyms which your teammates will recognize and where appropriate.

BEM in Webflow

Quick reminder — classes work two ways in Webflow:

1. Global classes

Webflow’s classes work exactly like classes in CSS. When we add an element to the page, we give it a class name (also known as a selector), then style it. When we add that same global class to another element, the styles will apply. We can also combine two or more global classes on the same element and receive styles from each. But, it’s better to use a combo class.

2. Combo classes

These allow us to add a class to a global class, creating a variant of the original global class. Let’s think of our example. We have a global class named .c-hero__text. We can then add another class to it — say, .is — small. This creates the combo class .c-hero__text .is — small. That way, we can add a small size to .c-hero__text without changing the original global class.

In Webflow, combo classes should be taken advantage of for modifiers. Using combo classes for modifiers allows us to reuse Webflow interactions by keeping global class names intact.

BEM pro tips

Namespacing

As mentioned before, you’ve noticed the use of c- littered throughout my examples. This idea stems from Harry Roberts’ namespacing technique, which improves code readability.

The following is the system I have adopted, and many of the prefixes appear throughout the code samples in this article. A quick key to reading the examples below:

1. Bolded terms = the type
2. Normal type = the prefix
3. Italic type = the example

Type : Prefix : Example

Layout : l- : l-section, l-grid

Component : c- : c-nav

Helpers : h- : h-show, h-hide

States : is-, has- : is-last, has-loaded

Using these namespaces has made my code even more readable. If I don’t manage to sell you on BEM, this is definitely a key takeaway.

You could adopt many other namespaces, but the list above is a good starting point. And don’t be shy. Introduce others as you get comfortable with the technique.

You’ll see a good example of the utility of this style of namespacing in the next problem.

Naming wrappers

Some components need a parent wrapper (or container) that dictates the layout. Layout containers typically have only padding, margin, or a display style added. In these cases, I always try to break down the layout into a layout element, such as l-grid. Inserting each component as the contents of each l-grid__item.

In our hero example, if we wanted to lay out a list of 3 c-hero components, I would use the following:

We now have a great idea of how layout elements work.

Don’t be afraid to use a few layout elements to save yourself a massive headache. No one is going to pat you on the back for cutting out a couple <div> elements!

Sometimes, this isn’t possible. If you want something semantic to name a parent element, what should you do? I tend to opt for the word section or container, depending on the scenario. Sticking with our hero example, I might use the class name “l-hero-section” and “l-hero-section__item”, depending on the use case. Consistency is key.

Should you BEM?

In my BEM-biased opinion: abso-freaking-lutely! BEM has been a lifesaver when making Webflow websites in a modular, component-driven way.

Now, there are several naming conventions you may want to consider, but hopefully this article gives you enough motivation to give BEM a try.

Now, question for the pros here

Have you tried designing in Webflow with a different naming convention? I would love to hear about the steps taken to be fast and efficient. Please share!

Up for a challenge?

Clone this project, make it your own, and share it with us when you’re done. Take this little tutorial site and make it amazingly yours!