David Mendoza
Posted on December 8, 2019
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;
}
💖 💪 🙅 🚩
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.