Bloques, elementos y modificadores - BEM

codegenial

David Mendoza

Posted on December 8, 2019

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>

Enter fullscreen mode Exit fullscreen mode

.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;
}
Enter fullscreen mode Exit fullscreen mode

📝 Metodologías BEM/codepen

💖 💪 🙅 🚩
codegenial
David Mendoza

Posted on December 8, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Carreiras na Área de TI
beginners Carreiras na Área de TI

March 24, 2022