The BEMs of Structuring CSS

Brian Eye CSS & HTML, Technology Snapshot 4 Comments

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:

blog-image

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, beye@keyholesoftware.com


About the Author
Brian Eye

Brian Eye


Share this Post

Comments 4

    1. I just read that website, and while I agree that consistency is paramount, I don’t care for the “outside in” ordering described.

      It seems to me that such ordering would vary from developer to developer. After all, I might consider some attribute to have more impact than you do. By always alphabetizing the attributes you ALWAYS know how to find it. If you are looking at the widths, they are all in the same (relative) place for each class.

      My other reason for preferring alpha order is that is how some built-in tools present them. That way my code is consistent with what the tool is displaying.

    2. I’ve been using the “Outside-In” method for quite a while. When it comes to layout, I always like to put what could break the layout first (position, float, width, height, margin, etc.) Usually it’s those things that are the culprits that cause issues, and I can find them quickly. If it’s not those things, then I can dive in more. I’ve always used that method and it’s just ingrained in me. I think it’s all based on preference and making sure that everyone is on the same page as to how you order things.

Leave a Reply