BEM - nadia2603/stage-maykin GitHub Wiki

Een voorbeeld in Codepen hoe je BEM kan gebruiken.

Voorbeeld met BEM:

• Block = intro
• Element = title
• Modifier = spotlight

SCSS

.intro {
  background: yellow;
  padding: 1em;

  &__title {
    font-weight: 500;
    color: purple;

    &--spotlight {
      color: red;
      font-weight: 700;
    }
  }
}

CSS

.intro {
  background: yellow;
  padding: 1em;
}

.intro__title {
  font-weight: 500;
  color: purple;
}

.intro__title--spotlight {
  color: pink;
  font-weight: 700;
}