SASS and BEM

This article explains SASS and BEM.

We will explain the concepts and implementation methods for preventing the confusion and fragility that tend to occur when CSS grows large-scale, using SASS and BEM, with concrete examples.

YouTube Video

SASS and BEM

As the number of files and screens increases, CSS tends to run into issues such as 'I don't know where this style is defined' and 'Just a small change broke the appearance on another screen.'.

This is because CSS is intrinsically a language that does not enforce design rules. If you keep writing as is, unintended dependencies will increase.

SASS and BEM are practical techniques to transform CSS from something you write ad hoc into something you design and manage, thus preventing such problems. By combining the two, you can clarify the meaning of styles and simultaneously improve readability, reusability, and maintainability.

Reasons why CSS easily becomes unmanageable

CSS like the following can become difficult to understand how it behaves when you look back at the code later.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• In this example, the same .title class looks different depending on where it is placed, so you can't instantly tell which style will be applied to this .title.
• In this way, as selectors become deeper and more dependent on parent elements, CSS becomes more difficult to predict the scope of influence and becomes prone to breaking when modified.

BEM is a naming convention that 'expresses roles through names'

BEM stands for Block / Element / Modifier, and includes in the name what component the class represents and what state it is in.

• Block is an independent component.
• Element is an internal element of the Block.
• Modifier stands for a state or variation.

1.card {}
2.card__title {}
3.card--highlighted {}

With this naming convention, you can infer the structure and role just by looking at the HTML.

Basic form of HTML using BEM

Here is an example of a card UI expressed in HTML using BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

From the class names alone, you can understand that this is a 'card component', 'title inside it', and the 'emphasized state'. This is the biggest advantage of BEM.

However, BEM alone can lead to verbose CSS.

If you write BEM as is in CSS, the amount of code tends to increase.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Here, by using SASS, you can have organized code that maintains the structure.

Naturally express BEM with SASS nesting

By using SASS nesting, you can reflect the structure of BEM directly in your code.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& refers to the parent selector and works very well with BEM naming.

CSS generated from this SASS

The above SASS is compiled into CSS like the following.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Even though the appearance is the same, the cognitive load for the developer is significantly reduced.

Designing for safe use of Modifiers

Since Modifiers in BEM represent 'states', the key is to limit them to use for overrides.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Design becomes more stable if Modifiers are treated not as 'additions' but as 'changes'.

Limit Element nesting to one level

In BEM, it's important not to nest elements too deeply.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Multi-level elements like .card__header__title are a sign that you should consider splitting the Block.

An example of SASS file structure

Finally, here's an example of a SASS structure that's practical for real projects.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

If you manage each component as 1 block = 1 file, it's less likely to break down.

Example of card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Because everything is self-contained at this unit, deletion, movement, and reuse become easy.

Summary

SASS and BEM are not just trendy techniques—they are practical approaches to turn CSS into designable code.

• BEM names the meaning and role.
• SASS allows for easy writing while maintaining the structure.
• Combining both makes CSS less prone to breaking.

Let's write the CSS today in a way your future self can understand.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video