Using BEM with SCSS(“Sassy CSS”)

Photo by Fabian Gieske on Unsplash

BEM stands for Block Element Modifier

Preprocessors are a great thing and they are providing us with a lot of benefits, and most importantly are a perfect match with BEM naming methodology.

BEM is a specific concrete application of OOCSS(Object Oriented CSS).

It speeds up the development process by arranging CSS classes into independent modules.

Block: A block represents an object on your website. It represents the main structural chunks of your code. For eg: Header, Menu, Search Form, Card listing.

// Blocks are named as standard CSS classes
.block {}

Element: An element is a component within the block that performs a particular function. For eg: Menu items inside a menu, Card description text, and image inside a card, or an input field inside a form.

// Elements declared with 2 underscores, after block
.block__element {}

Modifier: A modifier is how we represent the variations of a block. For eg: An active menu item inside a menu, variation in size or fill color of a button.

// Modifiers declared with 2 dashes, after block or after element
.block--modifier {}
// element and modifier together
.block__element--modifier {}

Consider the below sample card layout design to know how we can write SCSS and HTML structure using BEM methodology.

Block: The Card.

Element: The top section(with the background image and icon), the description text and the buttons.

Modifier: The variations are the font of the text and button styles.

HTML Structure

<section class="card-container">
 <article class="card">
    <header class="card__header">
      <img src=""  class="card__header--icon" alt="Card Icon" />
    </header>
    <div class="card__body">
      <h2 class="card__body--title">
        ...
      </h2>
      <p class="card__body--subtitle">
        ...
      </p>
   </div>
   <footer class="card__footer">
      <button class="card__footer--button-outline">Learn    
      More</button>
      <button class="card__footer--button-primary">Learn    
      More</button
   </footer>
 </article>
</section>

Block Class: card

Element Classes: card__header, card__body,card__footer

Modifier Classes: card__header — icon, card__body — title, card__body — subtitle, card__footer — button-outline, card__footer — button-primary

SCSS Structure

.card{
    &__header{
      &--icon{
      }
    }
    &__body{
      &--title{
      }
      &--subtitle{
      }
    }
    &__footer{
      &--button-outline{
      }
      &--button-primary{
      }
    }
}

The big question, what are the pros of using BEM?

CSS code is easy to append or overwrite, which can turn into a mess. It is like keeping coins on top of one another and building a tall tower until it reaches a point where it scatters.

Photo by Angie J on Unsplash

Choose because:

• Provides better communication between the technologies and the people using them. The team can easily analyze how the project design is made.
• Rendering engines evaluate CSS Selectors from right to left, resulting in better rendering performance.

Hope you all start exploring and using this methodology in your projects.