The BEMs of Structuring CSS

Brian Eye CSS & HTML, Development Technologies 4 Comments

Attention: The following article was published over 7 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

Now what I’m writing about isn’t really anything new, but I always feel like it’s good to reiterate the importance of structure in code. As back end developers know, structure is important for not only how clean the code is, but for maintainability. It’s the same for CSS.

Which brings me to a way of structuring the CSS. The BEM (Block Element Modifier) methodology. This method was introduced a couple of years ago, but it wasn’t until recently that I was introduced to it. Once I looked up what it was, I was surprised that I haven’t seen it used in projects that I’ve been brought in on and/or that I’ve started. The cool thing with this is that it helps come up with a nice structured way of naming your classes for CSS. And it’s similar to OOP (Object Oriented Programming).

Block

Think of the block being the main containers of the website. For example, a website will generally have a header, footer, main content area and a side bar. Look at the image below:

The <header> would be the block element. The block element is the main foundation and will always be at the beginning of the class. Look at the example code below:

.header {} /*Block*/
.logo {} /*Block*/

Element

The element is a piece of the block. And it’s notated with two underscores. So going back to the example of the header, your website will have some sort of nav, maybe a search bar and a logo. The class names might look something like this:

.header__nav {} /*Element*/
.header__search {} /*Element*/
.header__logo {} /*Element*/

So let’s look at how it would be used in a HTML setting. With the header, your HTML code could look something like this:

<header class="header">
	<a href="#" class="header__logo"><img src="images/logo.png" /></a>
	<ul class="header__nav">
		<li><a href="#">Lorem Ipsum</a></li>
		<li><a href="#">Lorem Ipsum</a></li>
		<li><a href="#">Lorem Ipsum</a></li>
	</ul>
	<form class="header__search">
		<input type="text" class="header__search-field">
		<input type="submit" value="Search" class="header__search-button">
	</form>
</header>

Modifier

When you create class names, you try to make them as repeatable as possible. But when you need to modify that class in a specific area of the site, that’s where the modifier portion comes into play. The modifier is notated with two hyphens. Here is an example:

.header--modifier {} /*Modifier*/
.header__element--modifier{} /*Modifier*/

Again, taking the header code from above, it could look like this in HTML:

<header class="header">
	<a href="#" class="header__logo"><img src="images/logo.png" /></a>
	<ul class="header__nav">
		<li><a href="#">Lorem Ipsum</a></li>
		<li><a href="#">Lorem Ipsum</a></li>
		<li><a href="#">Lorem Ipsum</a></li>
	</ul>
	<form class="header__search header__search--full">
		<input type="text" class="header__search-field">
		<input type="submit" value="Search" class="header__search-button">
	</form>
</header>

Do note that you want to try to keep these as simple as possible and you don’t want to have to create any extra classes unless it is absolutely in dire need.

Another nice thing with the BEM methodology is that you only have to use one class name for an HTML tag. Look at the example below.

<header class="header header--two-col">

Conclusion

After trying the BEM method, I have found that it is really helpful in keeping CSS code more tidy. Sure it might look odd or might be more difficult to read, but it definitely is powerful. I wouldn’t shrug it off right away. You can always use this method to create your own method that could be just as unique.

— Brian Eye, [email protected]

0 0 votes
Article Rating
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments