No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

BEM

3/19
Recursos

Aportes 11

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥減roducts-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 鈥減roducts-list鈥 son 鈥減roduct鈥, 鈥減roduct__image鈥, 鈥減roduct__details鈥, 鈥減roduct__title鈥, 鈥減roduct__description鈥 y 鈥減roduct__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 鈥淏lock, 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=鈥漛tn_big鈥>...</div>>  Mal ejemplo
<<div class=鈥漛tn_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.
aqu铆 les recomiendo sobre todo losbque somos nuevos, que no usen _ al pegar palabras, lo que se conoce como nomenclatura snake case, por que en mo caso por ejemplo en el bloque de un menu lo llamaba "menu_principal" luego un elemento quebllamada "productos-digitales" y luego un modoficador que cuando pasaran el mouse hiciera un efector hover no se que de nombre fuera "color_hover" cuando empezaba a juntar todo me confundia porque tenia que poner menu_principal__productos-digitales--color_hover aqu铆 les recomiendo mejor usen nomenclatura pascal o camello y quedar铆a as铆. por ejemolo con camello: "menuPrincipal__productosDigitales--colorHover" as铆 ya no hay confusi贸n y saben cual es elnbloque, cual es el elemento y cual el modoficador, espero y me haya explicado, saludos.

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