BEM + SCSS: a little guide for smart developers

22 October 2025 - 4 minutes reading

CSS management is not one of most developers’ favourite tasks.

However, there is an approach that makes the job easier, tidier and more scalable: BEM.

BEM introduces a clear and modular structure that keeps CSS code readable even in the most complex projects. It becomes easy to understand where and how styles are applied, avoiding unwanted overrides. BEM, applied with SCSS, let you to build a solid and scalable style base, comparable to a well-designed API.

In this article i’ll go in deep with BEM approach and how it can be used in combination with SCSS, offering some tips and two examples – with code – for React and Angular.

BEM in two words (actually three)

BEM stands for Block, Element, Modifier and is essentially a naming system for HTML and CSS code that helps to:

keep the code readable;
organizzare meglio i componenti;
enhance the components organization;
write SCSS code that is scalable and reusable.

Let’s take a look at the meaning of each of the three pillars Block, Element and Modifier.

Block refers to an autonomous and reusable component, for example

<div class="card">...</div>

Element is a part of the block:

<div class="card__title">Titolo</div>

Last, but not least, Modifier represents a variation of the block or element:

<div class="card card--featured">...</div>

BEM + SCSS: an example

I give you an example of HTML and CSS code written with BEM approach.

<div class="card card--highlighted">
    <h2 class="card__title">Titolo</h2>
    <p class="card__text">Testo</p>
    <a class="card__button card__button--primary">Scopri</a>
</div>

This is a block written using the SCSS format instead.

.card {
  &--highlighted { ... }

  &__title { ... }
  &__text { ... }

  &__button {
    &--primary { ... }
    &--secondary { ... }
  }
}

As I wrote at the beginning of this article, the code looks more organized, readable, and modular.

So, why adopt the BEM approach?

BEM methodology can really make the difference in medium and large projects:

CSS remains modular, avoiding conflicts between components;
class names are semantic and clear — no more .big-blue-button-v2-ne;
it is easy to reuse components from one project to another;
it works perfectly in both small teams and larger groups;
it is simpler and more consistent than other approaches such as SMACSS or OOCSS.

To further convince you about BEM and SCSS, here are two examples for React and Angular.

BEM approach applied in React and Angular

The following code defines a React component using the BEM methodology.

export default function Card({ title, isFeatured }) {
  return (
    <div className={`card ${isFeatured ? 'card--featured' : ''}`}>
      <h2 className="card__title">{title}</h2>
      <p className="card__description">Testo descrittivo</p>
      <button className="card__button card__button--primary">
        Vai
      </button>
    </div>
  );
}

In Angular, BEM is applied as in the following example, which defines card.component.html component.

<div class="card" [ngClass]="{ 'card--featured': isFeatured }">
  <h2 class="card__title">{{ title }}</h2>
  <p class="card__text">Descrizione</p>
  <button class="card__button card__button--secondary">Aziona</button>
</div>

Some classic mistakes to avoid with BEM

Wrong	OK	Explanation
`.menu__list__item`	`.menu__item`	Avoid nested elements (`__list__item`): with BEM there’ only one level of `__element`
`.item` senza `.menu`	`.menu__item`	The element must always belong to a block — it cannot exist on its own.
`.menu--active` over `.menu__item`	`.menu__item--active`	Modifiers should be applied to the correct element or block — they should not be “moved” elsewhere.
`.menu__item` outside `.menu`	Only inside `.menu`	Elements should always be contained within their own block.
`.block--modifier` used alone	Always together with `.block`	The modifier does not replace the block — it extends it or changes its state.

By adopting the BEM approach in your project files, you will definitely have clearer naming as well as:

a visual hierarchy just by reading the names;
knowing where each class “lives”;
being able to easily reuse components.

Next step with BEM

You can combine the BEM methodology with various SCSS directives to improve code modularity and maintainability:

@mixin to generate modifiers dynamically;
@extend %placeholders to reuse basic styles;
@use / @forward to organize a more modular and scalable SCSS structure.

A few more tips

Avoid reflecting the DOM structure in class names. Even if elem3 is inside elem2, which in turn is contained in elem1, still use the block__elem3 syntax. Fewer dependencies mean less complexity and greater maintainability.
If you need to change the layout based on screen size, use modifiers with JavaScript or media queries, but avoid names like sidebar-left: the layout may change, and that “left” could easily end up on the right.
Do not combine tags and classes in CSS selectors (e.g., button.button--red), as this increases specificity and makes it more difficult to apply overrides effectively.

Conclusion

BEM is the Marie Kondō of CSS: it brings order, clarity, and consistency to your code. It is not an absolute rule, but an intelligent methodology for structuring your stylesheets in a clean and scalable way.
In combination with SCSS, it becomes an even more powerful tool for improving code maintenance and readability.

Article written by

Tetiana Melnyk

Tag

Angular BEM css OOCSS React SCSS SMACSS