Styling React Components — The Sassy Way

This article assumes that the reader already has a basic understanding of React. If it’s not the case, I recommend you take a look at it, it’ll change your life!
The year is 2025, your current task is to update the style of a legacy project. Fair enough! You then proceed to open the single CSS file in the project, a monstrous abomination called styles.css. The file has 2500 lines. Before you know it, you are pulling your hair out and you realize no amount of caffeine is gonna save you.
There are plenty of options to organize your CSS codebase: Inline style, styled-components, css-modules, SASS, LESS, you name it. One of my favorite approach to tackle this problem is definitely the SASS + BEM approach. In this article, I’m gonna give you a basic overview of what it is and how it works.
First things first, what’s SASS ?
Sass stands for Syntactically Awesome Style Sheets. It basically is a preprocessor scripting language that is compiled into CSS. It enables you to use features that don’t exist in CSS yet like variables, functions, nesting and mixins to name a few.
Variables
Just like in JavaScript, you can store things in variables. It’s pretty straight-forward and you can probably already see some use cases for this.
Nesting
This is probably my favorite SASS feature. It allows you to nest CSS selectors the same way HTML markup can be nested. A simple example would be:
If you’re wondering what the & symbol does, it refers to the parent selector. It replaces the & symbol with the parent selector name. For example, once compiled, &__title becomes .header__title and &.--warning becomes .header__subtitle.--warning. It helps you write more concise code and in my opinion, it’s way easier to read!
Mixins
Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. For example, it could be really useful for font styles or media queries.
To use a mixin, you can simply call it with the include keyword:
Operators
Sass supports a bunch of operators that include mathematical operators like:
- == and != are used to check if two values are the same
- +, -, *, /, and % have their usual mathematical meaning for numbers
- <, <=, >, and >= check whether a number is less than or greater than another number
There are many other features available with SASS, I strongly encourage you to have a look at it. A good place to start is the SASS official website, there’s a pretty good guide on it.
Now, what’s the BEM approach ?
BEM stands for Block Element Modifier. It’s a naming system, which can solve many problems you’ll probably encounter when naming classes and structuring your CSS.
In a nutshell, it really helps avoid inheritance and provides some sort of scope by using unique CSS classes per element. It also reduces style conflicts by keeping CSS specificity to a minimum level. This methodology also does a great job of enabling you to create reusable front-end components, which is something that can be really useful in a React environment!
Here’s how it works:
Block
A block encapsulates a standalone entity that is meaningful on its own. Even though blocks can be nested and interact with each other, semantically they remain equal.
Element
Elements are parts of a block and have no standalone meaning, they are tied to their respective blocks.
Modifier
Modifiers are flags on blocks or elements. You can use them to change appearance, behavior or state.
So, for example, if we want to build a small card component with a title, a description and the possibility to put a yellow background-color using BEM, we could do something like this:

In this case, the .card is the block because it’s a standalone entity that is meaningful on its own. &__title and &__description are elements of our block and &.--warning is a modifier because it modifies the existing style.
This way, it’s now easy to organize and divide a CSS codebase. You could create a .scss file for every block, and avoid the dreaded styles.css file that has 1000+ lines and !important flags all over it. Yay!
Conclusion
It’s a fact that a badly organized CSS codebase can really come back to bite you. In my opinion, the SASS + BEM approach is one of the simplest yet powerful way to organize your styling codebase.
In my next article, I’m gonna show you a step-by-step implementation on how you can style your next React project, the Sassy way!
🔥🤙🔥
