BEM

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 26

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Andre Huaman Yovera

hace 2 años

Aquí presento un ejemplo de cómo aplicar BEM (Block, Element, Modifier) en un caso de la vida real. Imaginemos que estás trabajando en el diseño de un sitio web para una tienda en línea que vende productos electrónicos. Vamos a aplicar BEM para estilizar una lista de productos y un botón de compra.

Supongamos que el código HTML para la lista de productos es el siguiente:

<ul class="products-list">
  <li class="product">
    <div class="product__image">
      <img src="producto1.jpg" alt="Producto 1">
    </div>
    <div class="product__details">
      <h3 class="product__title">Producto 1</h3>
      <p class="product__description">Descripción del producto 1.</p>
      <span class="product__price">$99.99</span>
      <button class="product__buy-button">Comprar</button>
    </div>
  </li>
  <!-- Otras listas de productos -->
</ul>

Ahora, apliquemos BEM para estilizar estos elementos:

Block: El bloque más grande y significativo es “products-list”. Representa la lista de productos.

/* Estilos para el bloque "products-list" */
.products-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

Element: Los elementos dentro del bloque “products-list” son “product”, “product__image”, “product__details”, “product__title”, “product__description” y “product__price”.

/* Estilos para el elemento "product" */
.product {
  display: flex;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

/* Estilos para el elemento "product__image" */
.product__image {
  flex: 1;
  padding: 10px;
}

/* Estilos para el elemento "product__details" */
.product__details {
  flex: 2;
  padding: 10px;
}

/* Estilos para el elemento "product__title" */
.product__title {
  font-size: 18px;
  margin: 0;
  margin-bottom: 5px;
}

/* Estilos para el elemento "product__description" */
.product__description {
  margin: 0;
  color: #555;
}

/* Estilos para el elemento "product__price" */
.product__price {
  font-weight: bold;
}

Modifier: Los modificadores cambian el aspecto o el comportamiento de un bloque o elemento. Por ejemplo, podríamos tener un modificador para el botón de compra cuando un producto está en oferta:

/* Estilos para el modificador "product__buy-button--on-sale" */
.product__buy-button--on-sale {
  background-color: #ff9900;
  color: #fff;
  border: none;
  cursor: pointer;
}

Ahora, en tu código HTML, puedes aplicar el modificador cuando sea necesario:

<button class="product__buy-button product__buy-button--on-sale">Comprar</button>

Recuerda que BEM es una metodología de nomenclatura para escribir CSS más estructurado y modular. Cada clase tiene su propósito y se evitan selectores complejos o anidados. Con BEM, el código es más mantenible y escalable, lo que es especialmente útil en proyectos grandes y equipos de desarrollo. ¡Espero que este ejemplo te ayude en tu aprendizaje de arquitectura CSS y BEM!

Jeisson Felipe Rodriguez Prieto

hace 2 años

¿Qué es BEM?

~~BEM es una serie de televisión japonesa de anime de aventuras de terror sobrenatural.~~
Las siglas BEM significan “Block, Element, Modifier” y es un enfoque para estructurar y nombrar clases CSS de manera más organizada y escalable.

Block: Componentes independientes y reutilizables que representan una entidad significativa.
Element: Partes que forman parte del bloque y no tienen uso fuera de él.

Se nombran con doble guion bajo.
Ejemplo: [Block]__[Element]
Modifier: Variaciones o estados de bloques o elementos que cambian su aspecto o comportamiento.

Se nombran con dos guiones.
Ejemplo: [Block]--[Modifer]

Estructuras que podemos encontrar:

[ Block ]
[ Block ]__[ Element ]
[ Block ]--[ Modifier ]
[ Block ]__[ Element ]--[ Modifier ]
[ Block ]--[ Modifier ]

Jeffer Steven Nuñez Aragon

hace 2 años

BEM 🚀

BEM (Block Element Modifier): Es una metodología que se centra en la estructura del HTML y nombra las clases de manera descriptiva para formar bloques (componentes), elementos y modificadores.
.
Ejemplo:

<div class="comment">
  <img src="imagen-usuario.jpg" alt="Imagen de usuario" class="comment__avatar">
  <p class="comment__text">Este es un comentario.</p>
  <button class="comment__button comment__button--like">Me gusta</button>
</div>

/* Estilo base para el bloque de comentario */
.comment {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Estilos para el avatar del usuario en el comentario */
.comment__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Estilos para el texto del comentario */
.comment__text {
  font-size: 1rem;
}

/* Estilos para el botón de "Me gusta" en el comentario */
.comment__button {
  background-color: #3b5998;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Estilos para el modificador de botón de "Me gusta" destacado */
.comment__button--like {
  background-color: #1877f2;
}