BEM

Design of the website can change at any time, we must be ready for this HTML/CSS code is developing together with the design, ready to its changes
Programmer and front-end developers are working together on the website codebase, contributing to each other's code
Our CSS classes are easier for other team members to understand as they can easily identify the components in the HTML and also the purpose of the CSS classes.
As classes are prefixed with the block it reduces the likelihood of accidentally having two classes with the same name, useful for larger projects.
Using a naming convention gives your CSS and HTML more consistency making it easier to share code between projects.

.block {}
.block__element {}
.block--modifier {}

BEM in SCSS 3.3

Basic structure, example

.block {

  &__element {

  }
  &--modifier {

  }
}

<div class="module">
    <h2 class="module__heading module__heading--smaller">Lorem Ipsum</h2>
</div>

.module {
  background: grey;
  color: white;

    &__heading {
      font-size: 1em;
    }

    &--heading--smaller {
      font-size: .8em;
    }
}

And this compiles to...

.module {
  background: grey;
  color: white;
}
.module__heading {
  font-size: 1em;
}
.module__heading--smaller {
  font-size: .8em;
  color: red;
}