Member-only story
Optimize Your CSS Code With Sass

When you work on a large project, you find that the style gets more and more difficult to maintain, and when a client asks for changing the style of a part of the project you worked on it a long, long time ago ☹️️, yeah this is my reaction too.
Sometimes you ask yourself do you need to repeat this CSS code each time or you forget about the color you worked with and you hoped that there is a way to create variables inside CSS and pass them each time rather than pass the color.
Do we have a better way, 🤔?
Yes, this is when Sass goes in.
What is Sass?
Sass is a CSS pre-processor that compiles to CSS, meaning that all CSS rules are valid sass rules.
Sass adds superpower to CSS through variables, nested rules, mixins, functions, and more feature we will see them together.

Before we discover sass, I want to mention the BEM naming convention.
BEM naming convention:
BEM is a methodology for creating reusable components.
You can think of BEM as a naming convention that ensures that all your team members work with the same code base.
BEM stands for Block Element Modifier.
Our code should be like block__element — modifier
Block: represents a whole component or standalone entity.
Element: it is a part of the block.
Modifier: change the appearance, behavior, or state of an element or a block.
Now let’s imagine that we want to create a card component with a header, a body, and a footer like this.

To respect the BEM naming convention, our HTML should look like this:
<div class="card">
<div class="card__header">
<h1>The card header</h1>
</div>