BEM in Practice

Since you are now familiar with naming conventions, I will demonstrate BEM methodology in practice. Let’s say that we have this HTML code in action:

<a class=”btn btn--big btn--primary-colorhref=”#” title=”Title”>
  <span class=”btn__price”>$3.99</span>
  <span class=”btn__text”>Product</span>
</a>

With the following CSS markup applied:

.btn__price {/* Styles */}

.btn__text {/* Styles */}

.btn--big {/* Styles */}

.btn--primary-color {/* Styles */}

Now, don’t be mislead. In our examples so far we almost always had a block, element, and modifier, which doesn’t always have to be the case.

For example, let’s say we have a block named person. A person has legs and hands, it can also be female or male. If we want to define a male person with a right hand it will look like this:

.person--male__hand--right {/* Styles */}

Now you can see the real meaning of the BEM. We defined a person which modifier is a gender. Since it doesn’t matter if a person is male or female, it has a hand, and hand is an element. And again, each person can have right or left hand which is again a modifier.

In another case, if we want to define general person with a single hand, we will do it like this:

.person__hand {/* Styles */}

As you can notice, once you get comfortable with BEM it’s very easy to structure your CSS and HTML structure with it.

[/fusion_builder_column]

Using BEM with CSS Preprocessors

Personally, I can not imagine starting any new project without using one of the CSS preprocessors. As you all know, preprocessors are a great thing and they are providing us a lot of benefits, and most importantly they are a perfect match with BEM methodology.

In the following example, you can see the most typical example of BEM, in combination with SASS:

.person {
  &__hand {/* Styles */}

  &__leg {/* Styles */}

  &--male {
    /* Styles */

    &__hand {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }

    &__leg {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }
  }

  &--female {
    /* Styles */

    &__hand {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }

    &__leg {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }
  }
}

SASS code will compile into the following CSS:

.person__hand {/* Styles */}

.person__leg {/* Styles */}

.person--male {/* Styles */}

.person--male__hand {/* Styles */}

.person--male__hand--left {/* Styles */}

.person--male__hand--right {/* Styles */}

.person--male__leg {/* Styles */}

.person--male__leg--left {/* Styles */}

.person--male__leg--right {/* Styles */}

.person--female {/* Styles */}

.person--female__hand {/* Styles */}

.person--female__hand--left {/* Styles */}

.person--female__hand--right {/* Styles */}

.person--female__leg {/* Styles */}

.person--female__leg--left {/* Styles */}

.person--female__leg--right {/* Styles */}

If you want to go even further, you can use a handy SASS mixins for BEM:

/// Block Element
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

And you can use it like this:

.person {
  @include element('hand') {/* Person hand */}

  @include element('leg') {/* Person leg */}

  @include modifier('male') {
    /* Person male */
    
    @include element('hand') {
      /* Person male hand */
      @include modifier('left') {
        /* Person male left hand */
      }
      @include modifier('right') {
        /* Person male right hand */
      }
    }
  }
}

Which will produce the following CSS output:

.person__hand {
  /* Person hand */
}

.person__leg {
  /* Person leg */
}

.person--male {
  /* Person male */
}

.person--male__hand {
  /* Person male hand */
}

.person--male__hand--left {
  /* Person male left hand */
}

.person--male__hand--right {
  /* Person male right hand */
}

I know that most likely you won’t have a use case this long, but this is a great example of how BEM is used and why it’s so powerful, both in small and large scale projects.

2017-01-29T18:06:22-04:00May 19th, 2016|Guest Blog, Technical Solutions, Tips and Tricks|

About the Author:

Andrew is a technical writer for Deep Core Data. He has been writing creatively for 10 years, and has a strong background in graphic design. He enjoys reading blogs about the quirks and foibles of technology, gadgetry, and writing tips.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.