Class naming in Webflow 101: BEM
Now that Cross-project copy/paste is here, Webflow designers across the world are crying tears of joy. Second, modularity … to the max! Now, in addition to eliciting tears of joy, this feature also places a new importance on naming elements so they can be accessed and reused without much trouble.
There are only two hard problems in Computer Science: cache invalidation and naming things
— Phil Karlton
Why does naming matter? Well, elements named without any structure or naming convention lead to unmaintainable CSS.
Unmaintainable CSS?
Noooooo.
–me, you, all of us.
Enter BEM — one of a few reputable naming conventions you might consider for your design process. In this article, we’ll take a deep dive into BEM, what it means, and what it could mean for your design process. Better yet, we’ll give you a reason to clone this project and make it your own.
So … what’s BEM?
BEM stands for block, element, and modifier. It’s a naming convention that divides the user interface into small, reusable components that will prepare us for the changes in design of our websites.
This convention also enhances the cross-site copy/paste feature by helping make elements reusable components.
Here’s what the BEM convention looks like, visually:
Confused? Fear not. We’ll break it down.
The BEM convention helps you organize in a way that you’re already familiar with. For instance, let’s take a look at the organization of your body. You have a head, chest, legs, feet, etc. Each are part of the body, and each can be further broken down.
Your head is made of two eyes, a mouth, a nose, etc.
This way of organizing is exactly how BEM works, but for the elements of your site.
Let’s take a look at the BEM structure.
B is for block
Blocks, represented in green in the image above, represent high-level, self-contained elements, such as a navigation, menu, and hero elements, or any standalone entity. Block elements are meaningful on their own.
Naming blocks
Let’s start by naming the navigation:
.c-menu { }
Noice!
Why c-, you ask? This stands for “component” and forms the basis of how I namespace my BEM classes in Webflow.
A namespace tells us exactly what a class (or a group of classes) does in non-relative terms, and how classes behave in a more global sense. We’ll definitely dig more into namespaces since they’re super helpful.
E is for element
So we’ve got the block portion of BEM down, and now let’s dig into the element. Elements, represented in blue, are the next building piece in our BEM structure.
For instance, the menu block includes two elements: navigation links and social links. The navigation and social links are like children of the parent menu block.
Naming elements
Okay, we now understand that the “E” in BEM is an element. Naming elements is just as easy as naming blocks.
We create element class names by starting with the block, then adding two underscores, followed by the element name.
For example:
.c-menu__nav-link {
}
.c-menu__social-link {
}
M is for modifiers
Okay, we’re almost there! Naming our elements was a cinch. Now, let’s dig into the “M” of BEM. The modifiers.
As the name suggests, modifiers indicate variations of or changes to the elements. In the image below, all the labeled classes represent text that appears in the site’s hero. The main difference between them is their size: hence, the modifiers small and big.
Modifiers are represented in yellow in our example image: