BEM

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:

1. 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;
}

1. 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;
}

1. 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!

Esto fue lo primero que vi al realizar una búsqueda en el navegador.

BEM 🚀

.

1. 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;
}

¿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 ]

El objetivo de la metodologia BEM es hacer que los nombres de los selectores CSS sean lo mas informativos y transparentes posibles.
El nombre del bloque suele ser una sola palabra como .header, pero si tiene una definición de bloque más larga, se divide con un solo guión -

<.lang-switcher {/* Styles */}> 

El nombre del elemento comienza con doble guión bajo __:

<.lang-switcher__flag_basic {/* Styles */}> 

Solo hay una regla muy crítica en la metodología BEM: un modificador no se puede usar fuera del contexto de su propietario.

<.btn_big {/* Styles */}> 

Puede usar btn_bigsolo si el encabezado también está definido.

<<div class=”btn_big”>...</div>>  Mal ejemplo

<<div class=”btn_big”>...</div>>  Buen ejemplo

Además de estos estilos BEM originales, existen esquemas de nombres alternativos como los estilos Harry Roberts y CamelCase.

<.block-name__element-name--modifier-name {/* Styles */}>  Estilo Harry Roberts 

<.BlockName__ElementName_ModifierName {/* Styles */}>  Estilo CamelCase

/**
    Platzi Navbar header
    --------------------
    PD: Prefiero usar single slash para separar palabras en nombre de entidades
*/

.sidebar {
    width: 32px;
    height: 100px;
    transition: width .3s;
    overflow: hidden;
    background-color: #24385b;
    position: fixed;
    left: 0;
    top: 0;
}

.sidebar-header--active {
    width: 240px;
}

.sidebar-header__drawer {
    background-color: #33b1ff;
    width: 32px;
}

.sidebar-header {
    display: flex;
}

.sidebar-header__info {
    padding: 12px;
    color: white;
}

.sidebar-header__icon {
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

Información súper útil de BEM https://bem-cheat-sheet.9elements.com/

Les dejo un video corto por si quieren profundizar un poco: https://www.youtube.com/watch?v=wDUwGo98JTA

Y unas recomendaciones:

• Usa nombres de bloques descriptivos que sean fáciles de entender.
• Usa nombres de elementos descriptivos que sean específicos del bloque.
• Usa nombres de modificadores que sean claros y concisos.
• Evita usar modificadores globales, como disabled o active.
• Usa la metodología BEM de manera consistente en todos tus proyectos.

Esta interesante BEM

Así se mira BEM aplicado en una barra de navegación…

<nav class="navbar">
  <a href="#" class="navbar__item">Inicio</a>
  <a href="#" class="navbar__item">Productos</a>
  <a href="#" class="navbar__item navbar__item--active">Nosotros</a>
  <a href="#" class="navbar__item">Contacto</a>
</nav>

.navbar {
  background: #333;
  padding: 1em;
  display: flex;
}

.navbar__item {
  color: #fff;
  text-decoration: none;
  margin-right: 1em;
}

.navbar__item--active {
  color: #f00;
}