Tom RayTom Ray

Published: January 14th 2020

Updated: January 14th 2020

This is a quick start guide to learning BEM, the component-driven CSS methodology.

If you want to start practicing and applying BEM to your projects, this guide will help you get started.

Ready? Let’s dive in:

BEM Overview

BEM (Block-Element-Modifier) is a CSS naming convention developed by the team at Yandex to improve scalability and maintainability in web development.

Put simply, the idea of BEM is to “divide the user interface into independent blocks” by naming CSS classes in the following methodology:

/* Block component */
.card {}

/* Elements are dependent on their parent block */ 
.card__img {}

/* Modifiers are for incremental style changes */
.card--dark {} 
.card__img--large {}
  1. Block: an independent component that can be reused (e.g. with class name .nav)
  2. Element: a child within a block that cannot be used separately from that block (e.g. with class name .nav__item)
  3. Modifier: a variation in the style of either a block or modifier (e.g. with class name .nav--dark)

Let’s dive into some real CSS examples to get a hang of this thing.


Blocks are reusable components. Like buttons, cards or form fields.

When naming your blocks, focus on describing its purpose (i.e. what it is) rather than its state (i.e. what it looks like).

For example, .btn or .nav follows the correct naming convention for a block.

.big or .bright-pink describes how it looks, so doesn’t scale well when you want to change the design later on.







If you’re wondering how to place blocks within blocks (for example, a button inside a nav), here’s a short article to help you with that.


Inside blocks are where elements live. Elements are dependent on their parent block, and so cannot be used without them.

Elements also have a unique CSS class naming convention which works like this:


For example, using the .card component, an element inside the card component (like an image) would have a class name like .card__img.

The element name always appends the block name, separated by a double underscore __.







It’s important to note that the second code snippet avoids using more than 1 selector to target the styles (e.g. like .card img {}).

It’s considered best practice to use a BEM element class and use that directly instead (like .card__img {}).

Following this approach reduces the chance of cascade issues down the line.


When you have varying styles in blocks (or elements), that’s where modifiers come in.

For example, your ‘card’ block might have a light and dark version. Or you might have primary and secondary buttons.

Modifiers have a unique CSS naming convention which works like this:

block--modifier or block__element--modifier.

That’s right- BEM modifiers can be applied to both blocks and elements.

Let’s dive into some bad and good practices:




It’s considered bad practice to use a modifier class in isolation (i.e. without the block or element class).

That’s because the modifier is meant to add incremental style changes to the block.

Therefore, whenever using a modifier, ensure it’s used with the base class:




And that’s it!

Those are the fundamentals to get you off and running with BEM.

If you’re interested to learn more about the ‘why’ behind BEM, I recommend checking out this CSS Tricks article.

Like learning anything new, practicing is key. Give BEM a shot in your next project and see where it takes you!

Download The Free BEM Cheat Sheet

Want to start practicing BEM and looking for a no-nonsense, quick start action guide?

Download a free cheat sheet covering BEM basics so you can dive in and start practicing today.



Quick wins for a better way-finding experience.

Nov 2019

Disney Plus was a huge success in terms of sign-ups when it launched on Nov 12. In just 24 hours it amassed over 10 million subscribers, and over 3.2 million app downloads. Having now been a month since the launch, they’ve ironed out initial glitches and started adding features, like continue watching. Overall it feels simple and approachable. One area that still falls short is the navigation and way-finding experience. Inconsistency in patterns and some navigation oversight add friction to the experience, lowering quality, and would benefit from some additional consideration.


The top level navigation menu is clear and simple, and the hover animation that mirrors the motion in the animated logo adds a nice touch. Still, there are two areas that seem overlooked. First, the misalignment of the labels with the rest of the elements in the top bar is a quick win that would make the nav feel more polished.

Second, and more importantly, there are no active states for the menu items. This makes it impossible to quickly scan the menu and identify where you are, forcing you to look at the content below. Inconsistency in page titles amplifies this problem, and although there aren’t a ton of items in the nav, adding an active state could really improve usability.

Page Titles

There are a few different title patterns used within the application. The large distinct titles on the Movies and Series pages work well and clearly communicate what page you’re on. Strangely 3 out of the 6 pages in the nav have their own pattern.

Home is where differentiation probably makes the most sense since it’s the most unique page, aimed to highlight content and help you pick up where you left off. 

Search is also a bit unique given it has an oversized search bar across the top of the page. The title pattern is the same as Series and Movies, but once you search the title and content are replaced with your search results. 

The Watchlist does not have a page title at all. This is especially problematic since the navigation doesn’t highlight the active page. Looking at the screenshot below as an example, the user really has no clue where they are. It makes this section feel forgotten with respect to the rest of the experience.

On smaller screens the labels are dropped from the nav altogether, and it’s condensed to 4 icons. Home, Search, Watchlist, and overflow. The lack of a page title means that on a smaller screen a user might never know this is the watchlist. It doesn’t seem to be referenced anywhere else in the product.

As an example, following the pattern that has already been established elsewhere (Movies/Series) would add clarity to this page, build on existing patterns reducing divergence, and increase consistency within the experience.

The Originals section also suffers from a rogue title pattern. Disney probably wanted to call out Originals in a special way, but I wonder if users really see the content on this page differently from content in the other sections. Especially since the content from Originals also shows up in the other categories. The animated logo on this page is very prominent and pushes down the content quite a bit, and just seems unnecessary. I’m going to advocate for consistency and make the argument that this page should also follow the same title pattern as the other pages.

iOS App


A key difference in the nav items here is that the Watchlist has been replaced by Downloads. This probably makes sense given that users are more likely to download content for viewing offline on a portable device. Interestingly, the watchlist is really buried in the app, and is actually lumped in with profile related items.

If you recall on the small desktop screen Watchlist was one of the key items that remained. This choice here is puzzling because I really think there is enough room in the tab bar here to include a 5th icon. This would keep the watchlist in the nav and maintain consistency with the web experience. It might even be worth exploring combining Watchlist and Downloads into one feature.

On the mobile app, Originals, Movies, and Series are content types within the search/explore page. This is a departure from the pattern on desktop but is a clever way to expose those categories within search/explore.

Page Titles

The page title patterns mostly translate over from the web version, and suffer from a similar lack of consistency. The Watchlist does have a title, but again uses a different pattern from some of the other sections in the app.

Return Actions

There is one page navigation pattern that creates significant friction. Throughout the app, the consistent way to “go back” is via a back arrow in the top left of the screen. Even when you’re viewing video content you get “back” by tapping an arrow in the top left.

The only place this pattern differs is on the content detail pages. Here the pattern is reversed and the user has to tap an x in the top right. The placement of this in the opposite corner is frustrating, and it’s hard to justify reasons for changing the pattern here. The x does essentially the same job as the back arrow on any of the other pages. Using the established back arrow pattern would eliminate this point of friction.

Disney Plus feels simple and approachable. The navigation experience does a good job of helping the user find and interact with the thing that matters most, the content. We’ll have to see how the product evolves as more content is added, and as competition from other streaming platforms intensifies.

Thanks for reading!