No tienes acceso a esta clase

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

Casos pr谩cticos de BEM

4/19
Recursos

Aportes 4

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

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 鈥渂tn鈥 para todos los botones, y los modificadores 鈥渂tn鈥損rimary鈥 y 鈥渂tn鈥搒econdary鈥 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铆, 鈥渘avbar鈥 es el bloque de la barra de navegaci贸n, 鈥渘avbar__link鈥 son los enlaces y 鈥渘avbar__link鈥揳ctive鈥 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铆 鈥渓ist鈥 es el bloque de la lista, 鈥渓ist__item鈥 son los elementos de la lista, y 鈥渓ist__item鈥揾ighlighted鈥 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>