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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What’s New in 97.209?

Even faster code formatting using ESLint

How to upload an image on a AWS Server by AWS pre signed URL using URLSession?

What I learned Mar 29th — Apr 4th

Share Texts, URLs, or Files Using the Navigator Share API

WHY FLUTTER?

Validating Urls In Ruby

How to create a buttonless bot

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
Aarushi Lal

Aarushi Lal

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.

More from Medium

A Walkthrough for fetching API

HTML5 AND CSS BASİC

How to make a light and dark mode button in HTML, CSS, and JS!

Chapter 18: CSS Web Fonts and Colors