Casos prácticos de BEM

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.

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>

que genial!

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