Organización BEM

BEM en CSS te permite escalar estilos sin conflictos al nombrar clases con una estructura clara. Con bloques, elementos y modificadores bien definidos, los estilos dejan de “pisarse” y el código se vuelve predecible, mantenible y fácil de leer.

¿Qué es BEM y cómo evita conflictos en CSS?

BEM significa block, element y modifier. La idea central: cada clase indica su rol y alcance. Un bloque agrupa una pieza independiente de interfaz; un elemento es una parte del bloque; un modificador expresa un estado o variante.

• Bloque: representa un componente como una tarjeta, por ejemplo, card.
• Elemento: se nombra con doble guion bajo: card__title, card__price, card__button, card__badge.
• Modificador: se nombra con doble guion: card--feature, card__button--disable.

Así se evita que estilos globales se mezclen: cada selector apunta a un contexto específico.

¿Cómo se estructura un bloque, elemento y modificador?

• Bloque independiente: card agrupa borde, padding y tamaño máximo.
• Elementos internos: card__title, card__price, card__button y card__badge heredan el contexto de card.
• Modificadores: --feature para destacar la tarjeta y --disable para estados del botón.

¿Cómo nombrar clases con BEM en una tarjeta card?

La tarjeta funciona como bloque principal. Dentro, se definen elementos para el título, el precio, los botones y un badge. Luego se aplican modificadores para estados específicos.

¿Cómo estilizar el bloque card?

Se trabaja primero el contenedor para visualizarlo con claridad: borde, espaciados y ancho máximo.

.card {
  border: 2px solid #333;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 300px;
}

• Borde visible para distinguir componentes.
• Padding interno uniforme.
• Margin-bottom para separar tarjetas.
• Max-width para controlar el crecimiento.

¿Cómo estilizar los elementos title, price y button?

Se aplican estilos puntuales a cada elemento, sin afectar otros bloques.

.card__title {
  color: #333;
  margin-bottom: 50px; /* se ajustó para que se note la separación */
}

.card__price {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
}

.card__button {
  padding: 10px 20px;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}

• Título con color y separación perceptible.
• Precio con font-size grande y font-weight en negrita.
• Botón con padding cómodo, sin borde, color de texto blanco y cursor tipo pointer.

¿Cómo aplicar un badge dentro del bloque?

Un distintivo como oferta se modela también como elemento.

.card__badge {
  background: red;
  color: white;
  padding: 3px 8px;
  font-size: 12px;
}

• Señal visual clara con contraste.
• Tamaño compacto y legible.

¿Cómo usar modificadores para estados como feature y disable?

Los modificadores expresan variaciones: uno para el bloque completo (feature) y otro para el botón deshabilitado (disable). Separar estado de estructura mantiene el CSS limpio y predecible.

¿Cómo diferenciar el bloque con card--feature?

Se ajusta el borde para destacar el componente sin duplicar reglas del bloque base.

.card--feature {
  border-color: gold;
  border-width: 3px;
}

• Visual más prominente sin romper la consistencia.
• Reutilización del bloque con mínimos cambios.

¿Cómo comunicar un botón deshabilitado con card__button--disable?

El estado de “no permitido” se refleja en color y cursor.

.card__button--disable {
  background: grey;
  cursor: not-allowed;
}

• Fondo gris para comunicar estado inactivo.
• Cursor not-allowed para retroalimentación inmediata.

¿Qué habilidades y keywords refuerzas?

• Estructuración con BEM: block, element, modifier.
• Nomenclatura: __ para elementos y -- para modificadores.
• Encapsulamiento de estilos: evitar que “se pisen”.
• Propiedades clave: border, padding, margin-bottom, max-width, color, font-size, font-weight, background, cursor.
• Estados UI: feature para el bloque y disable para el botón.

¿Tienes dudas sobre cómo adaptar estos selectores BEM a tus componentes actuales? Comparte un ejemplo y con gusto te ayudo a nombrarlos y a definir sus estados.