No tienes acceso a esta clase

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

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
6 Hrs
47 Min
47 Seg

Casos prácticos de BEM

4/19
Recursos

¿Cómo identificar bloques, elementos y modificadores en BEM?

En el mundo del desarrollo web y CSS, la metodología BEM (Bloque, Elemento, Modificador) es esencial para organizar y mantener limpias las hojas de estilo. Aquí te guío para identificar las diferentes partes de un componente con algunos ejemplos prácticos.

¿Qué es un bloque en BEM?

El bloque es la unidad principal de la metodología BEM. Es un contenedor independiente que no depende de otro bloque ni actúa como elemento de ningún bloque.

  • Ejemplo 1: En una tarjeta (cart), el bloque sería la tarjeta misma: <div class="cart">.
  • Ejemplo 2: Para un navbar, el bloque es el componente superior que envuelve todo el contenido.

¿Cuál es la función de los elementos en BEM?

Los elementos son partes de un bloque que solo tienen sentido en el contexto de ese bloque y no pueden existir de manera independiente.

  • Ejemplo 1: En la tarjeta (cart), los elementos incluyen <img class="cart__image"> y <p class="cart__text">.
  • Ejemplo 2: Con un navbar, los elementos podrían incluir el logo o los ítems: <div class="navbar__logo">.

¿Qué rol juegan los modificadores en BEM?

Los modificadores son utilizados para cambiar aspectos visuales o de comportamiento de un bloque o elemento mediante clases adicionales.

  • Ejemplo 1: En el caso del navbar, un ítem con un color específico podría tener un modificador como navbar__item--gray.
  • Ejemplo 2: En el ejemplo de la tarjeta podríamos imaginar un modificador como cart--primary para una versión destacada.

Buenas prácticas y errores comunes en BEM

¿Cuáles son las buenas prácticas al usar clases en BEM?

  1. Mantén siempre la clase principal del bloque: Añade otras clases para modificadores, sin reemplazar la clase del bloque.
  2. Evita representar niveles de profundidad en HTML con BEM: No confundas las hierarquías de HTML con la estructura BEM.
  3. Incluye la clase para cada hijo que requiera estilos específicos: Define clases para cada hijo independientemente de la profundidad del HTML.

¿Qué errores debemos evitar en la metodología BEM?

  1. No uses clases de modificador solas como principales: Evita usar solo modificadores como cart--flat sin el bloque correspondiente.
  2. No abuses de las jerarquías dentro de BEM: No caigas en construir clases como cart__text__icon, ya que va contra la filosofía simple de BEM.
  3. Evita omitir clases necesarias: Asigna clases a todos los elementos que requieran estilos, incluso si parecen redundantes.

¿Cómo estructurar el HTML correctamente con BEM?

Al implementar BEM en HTML, es crucial seguir una estructura clara para asegurar la eficiencia y el mantenimiento del código.

<!-- Ejemplo de tarjeta con BEM -->
<div class="cart">
  <img class="cart__image" src="ruta/a/imagen.jpg" alt="Descripción de imagen">
  <p class="cart__text">Contenido del texto</p>
</div>

<!-- Ejemplo de navbar con BEM -->
<nav class="navbar">
  <div class="navbar__logo">Logo</div>
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Inicio</li>
    <li class="navbar__item">Servicios</li>
    <li class="navbar__item navbar__item--gray">Contacto</li>
  </ul>
</nav>

Recuerda que la claridad, la consistencia y el compromiso con las normas de BEM ayudarán a que tu trabajo en equipo sea más fluido y tu código más legible. A medida que sigues aprendiendo y practicando, estas técnicas de BEM se convertirán en una segunda naturaleza para ti. ¡Sigue explorando y mejorando tus habilidades en CSS!

Aportes 12

Preguntas 4

Ordenar por:

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

Ejemplos

  • Botones: Imagina que tienes diferentes botones en tu sitio web. Puedes nombrarlos con BEM de esta forma:

    <button class="btn">¡Dale Click!</button>
    <button class="btn btn--primary">Enviar</button>
    <button class="btn btn--secondary">Cancelar</button>
    

    Ahí tienes el bloque “btn” para todos los botones, y los modificadores “btn–primary” y “btn–secondary” para cambiar su apariencia.

  • Barra de Navegación: Si tienes una barra de navegación en tu página, BEM te puede ayudar a organizarla:

    <nav class="navbar">
    <a href="#" class="navbar__link">Inicio</a>
    <a href="#" class="navbar__link navbar__link--active">Servicios</a>
    <a href="#" class="navbar__link">Contacto</a>
    </nav>
    

    Así, “navbar” es el bloque de la barra de navegación, “navbar__link” son los enlaces y “navbar__link–active” es el modificador para el enlace activo.

  • Listas: Para una lista de cosas, BEM puede serte útil:

    <ul class="list">
    <li class="list__item">Elemento 1</li>
    <li class="list__item">Elemento 2</li>
    <li class="list__item list__item--highlighted">¡Elemento 3 es el mejor!</li>
    </ul>
    

    Aquí “list” es el bloque de la lista, “list__item” son los elementos de la lista, y “list__item–highlighted” es el modificador para destacar el elemento 3.

Que hacer y que no hacer.

La hora de querer aplicar la metodologia bem, hay que identificar los bloques elementos y modificadores:

<!-- Formulario de Inicio de Sesión -->
<div class="login-form">
  <h2 class="login-form__title">Iniciar Sesión</h2>
  <form class="login-form__form">
    <div class="login-form__form-group">
      <label for="username" class="login-form__label">Nombre de usuario:</label>
      <input type="text" id="username" class="login-form__input" placeholder="Ingresa tu nombre de usuario" required>
    </div>
    <div class="login-form__form-group">
      <label for="password" class="login-form__label">Contraseña:</label>
      <input type="password" id="password" class="login-form__input" placeholder="Ingresa tu contraseña" required>
    </div>
    <button type="submit" class="login-form__submit-button login-form__submit-button--hoverable">Iniciar Sesión</button>
  </form>
</div>
/* Estilos base del Formulario de Inicio de Sesión */
.login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* Estilos del título */
.login-form__title {
  text-align: center;
  font-size: 24px;
  color: #007bff;
  margin-bottom: 20px;
}

/* Estilos del formulario */
.login-form__form-group {
  margin-bottom: 15px;
}

.login-form__label {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.login-form__input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-form__submit-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Modificador: Botón de Submit Hoverable */
.login-form__submit-button--hoverable:hover {
  background-color: #0056b3;
}

Casos con lo que debes y no debes hacer con BEM

  1. Caso uno

    ✅ Dejar la clase principal y añadir otra con modificador

    ❌ Usar la clase con modificador como si fuera la clase principal

  2. Caso dos

    ✅ No representar los niveles de profundida de HTML con BEM

    ❌ Respresentar los niveles de profundidad de HTML con BEM

  3. Caso tres
    ✅ Incluir la clase en un hijo que necesita estilos
    ❌ Anidar con selectores por no colocarle la clase a los hijos

Espera un segundo… ¿Los ejemplos de spaceX son utilizados por aquello de que spaceX utiliza javascript en varios lados como en las interfaces de varias cosas? Muy bien pensado, el ver que JS puede ser usado a ese nivel es una de las cosas que hizo que lo tomara más en serio y lo aprendiera a profundidad, y para minimizar el tiempo a invertir pague platzi.
Sobre todo por las escuelas, pues yo hago lo mismo antes de aprender algo, tener un panorama general, buscar material, ordenarlo por pasos y al final comenzar a aprender, platzi me ahorra el tener que ordenar los pasos.

No se asusten con BEM, la practica hace al maestro.
No entendi nada

Ejemplo de @teffcode

  <section class="section"> <!-- Block -->
    <div>
			<!-- Element (H2 - section__text) 
					 Modifier (text section__text--gray)  -->
      <h2 class="section__text section__text--gray">Falcon 9</h2>	
      <p class="section__text section__text--secondary-semibold">Falcon 9, the world's...</p>
      <p class="section__text section__text--secondary-bold">Learn more about Falcon 9</p>
      <ul class="list">
        <li class="list__item"> <!-- Block -->
          <span class="list__text">VEHICLE HEIGHT</span> <!--Element-->
          <div>
            <span class="list__text">70m</span>
            <span class="list__text list__text--gray">/229.6 ft</span> <!-- Modifier (list__text--gray) -->
          </div>
        </li>
      </ul>
    </div>
  </section>
bla bla bla, esto es lo mismo de la clase pasada
Vayah que estas lecciones son Muy Valiosas y Fantasticas, Realmente si que Ayuda, La Profe explica Muy Bien y es Muy Amigable, Ella Si que sabe de fRONTeND. Muchas Gracias @teffCode.
Otra clase abubrrida. No se la salten!!


que genial!

Tal vez el theme no es el más feliz pero sirve para resaltar:

A veces, por perecita, olvidamos lo maravillosa que es la profe steff <3