Rule SCSS with BEM (Block.Element.Modifier) methodology

Here is a simple example where we use BEM notation to create a Card component.

HTML

Using the BEM notation we are defining the main block (the card) which contains elements (__) and modifiers (--).

<div class="card">
  <span class="card__img"></span>
  <div class="card__content">
    <ul class="card__list">
      <li class="card__item card__item--active">Adobe XD</li>
      <li class="card__item">Figma</li>
      <li class="card__item">Sketch</li>
    </ul>
    <p class="card__desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero atque iste nobis quidem dolore error animi voluptas quia corrupti consectetur.</p>
    <a class="card__link" href="#">Visit the link</a>
  </div>
</div>

CSS

First we define the structure of the html and body elements.

body, html {
    margin: 0;
    height: 100vh;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    background: rgb(238, 238, 238);
    font-family: 'Nunito', sans-serif;
}

Then we define the card block (.card) with its elements (__) and modifiers (--) using the BEM methology.

.card {
    padding: 0 5em;
    width: 300px;

    &__img {
      display: block;
      height: 300px;
      width: 100%;
      background: #2ae897;
    }

    &__content {
        padding: 1.5em;
        background: white;
    }

    &__list {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    &__item {
        padding: .3em .5em;
        margin-right: .5em;
        background: rgb(230, 230, 230);
        border-radius: .3em;
        font-size: .85em;

        &--active {
            background: #3b3030;
            color: #FFFFFF;
            font-weight: bold;
        }
    }

    &__link {
        background: #2ae897;
        color: #3b3030;
        text-decoration: none;
        padding: .5em 1em;
        border-radius: .5em;
        display: inline-block;
        margin-top: .5em;
        font-weight: bold;
        right: 0;

        &:hover {
            background: #575757;
            color: white;
        }
    }
}

Final result

Resources

You Probably Need BEM CSS in Your Life (Tutorial)