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.

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.

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.

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

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

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.



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

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.