Bloques, elementos y modificadores - BEM

No le sorprenderá saber que BEM es una abreviatura de los elementos clave de la metodología: Bloque, Elemento y Modificador. Las estrictas reglas de denominación de BEM se pueden encontrar aquí.

Bloque / Block

Entidad independiente que es significativa por sí sola.
Ejemplos:

header container menu checkbok input

---

Elemento / Element

Una parte de un bloque que no tiene un significado independiente y está semánticamente vinculado a su bloque.
Ejemplos:

menu item list item checkbok caption header title

---

Modificador / Modifier

Una bandera en un bloque o elemento. Úsalos para cambiar la apariencia o el comportamiento.
Ejemplos:

disabled highlighted checked fixe size big color yellow

<button class="button">
    Normal button
</button>
<button class="button button--state-success">
    Success button
</button>
<button class="button button--state-danger">
    Danger button
</button>

.button {
    border: none;
    padding: 15px 35px;
    margin: 16px;
    border-radius: 5px;
    color: #fff;
    background-color: #008b8b;
    font-size: 1rem;
}

.button--state-success {
    background-color: #8439da;
}

.button--state-danger {
    background-color: #8439da;
}

.button--state-danger:hover {
    background-color: #745c97;
}

📝 Metodologías BEM/codepen