Using BEM with SCSS(“Sassy CSS”)
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.
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.