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.

A UI person by profession, often fascinated with the world around. Loves to delineate a story , a moment or a thought via sketch or camera.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store