Proyecto: Componentes con Metodología BEM

¡Hola equipo! 👋

En este proyecto hemos puesto en práctica la metodología BEM (Bloque, Elemento, Modificador) para dar estilo a nuestros componentes: un Navbar y una Card.

El objetivo es mantener nuestro CSS organizado, fácil de entender y escalable. A continuación, explicamos cómo hemos aplicado BEM en nuestro código.

¿Qué es BEM?

BEM es una forma de nombrar nuestras clases de CSS para que se entienda rápidamente qué hace cada parte del código y cómo se relacionan entre sí.

• Bloque: Es el componente principal, independiente y con significado propio.
• Elemento: Una parte del bloque que no tiene sentido por sí sola. Se separa con dos guiones bajos __.
• Modificador: Una variante o estado del bloque o elemento. Se separa con dos guiones medios --.

---

1. Componente Navbar

Hemos creado un bloque principal llamado .nav.

Estructura BEM aplicada:

• Bloque: .nav
  • Es el contenedor principal de la navegación.
• Elementos:
  • .nav__menu: La lista (ul) que contiene los ítems.
  • .nav__item: Cada ítem individual de la lista (li).
  • .nav__link: El enlace (a) dentro de cada ítem.
• Modificadores:
  • .nav__item--featured: Un ítem destacado (por ejemplo, con un borde especial).
  • .nav__link--active: El enlace de la página actual (resaltado en otro color).

Ejemplo en código:

<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__item">
      <!-- Modificador --active aplicado al elemento nav__link -->
      <a href="" class="nav__link nav__link--active">Inicio</a>
    </li>
    <!-- Modificador --featured aplicado al elemento nav__item -->
    <li class="nav__item nav__item--featured">
      <a href="" class="nav__link">Contacto</a>
    </li>
  </ul>
</nav>

---

2. Componente Card

Nuestro segundo componente es una tarjeta de información, definida por el bloque .card.

Estructura BEM aplicada:

• Bloque: .card
  • El contenedor de toda la tarjeta.
• Elementos:
  • .card__header: Cabecera de la tarjeta.
  • .card__title: Título dentro de la cabecera.
  • .card__body: Cuerpo principal de contenido.
  • .card__text: Texto descriptivo.
  • .card__footer: Pie de la tarjeta.

Ejemplo en código:

<article class="card">
  <header class="card__header">
    <h2 class="card__title">Título</h2>
  </header>
  <div class="card__body">
    <p class="card__text">Contenido...</p>
  </div>
  <footer class="card__footer">...</footer>
</article>

---

3. Componente Botón (Reutilizable)

También creamos un bloque independiente para los botones, .button, que se usa tanto en el Navbar como en la Card.

• Bloque: .button
  • Estilos base del botón.
• Modificadores:
  • .button--primary: Botón principal (color azul marino).
  • .button--warning: Botón de advertencia (color amarillo).

Ejemplo en código:

<!-- Botón primario -->
<button class="button button--primary">Ver más</button>

<!-- Botón de advertencia -->
<button class="button button--warning">Bloquear</button>

---

Resumen

Concepto	Sintaxis	Ejemplo en nuestro proyecto
Bloque	.bloque	.nav, .card, .button
Elemento	.bloque__elemento	.nav__link, .card__title
Modificador	.bloque--modificador	.button--primary, .nav__link--active

¡Sigan practicando! BEM nos ayuda a que nuestro código "hable" por sí mismo. 🚀