Escribir CSS limpio y organizado es importante, especialmente para proyectos más grandes. Una de las mejores formas de estructurar su CSS es mediante la convención de nomenclatura BEM. En este artículo, explicaremos qué es BEM, por qué es importante, sus ventajas y desventajas, y le mostraremos cómo usarlo con dos ejemplos.

¿Qué es BEM?

BEM significa Bloque, Elemento y Modificador. Es un sistema de nombres para escribir nombres de clases CSS que hace que su código sea más fácil de entender y mantener. El objetivo principal de BEM es ayudar a los desarrolladores a escribir CSS reutilizable, modular y escalable.

1. Bloque: Un componente independiente que tiene sentido por sí solo (por ejemplo, un botón o un formulario).
2. Elemento: Una parte del bloque que no tiene significado por sí sola y depende del bloque (por ejemplo, un icono de botón).
3. Modificador: Una versión diferente de un bloque o elemento (por ejemplo, un botón con un color diferente).

.block {}
.block__element {}
.block--modifier {}

¿Por qué utilizar BEM?

Usar BEM te ayuda a evitar CSS confuso y desordenado. Aporta varios beneficios:

• Consistencia: Todos los nombres de clases siguen el mismo patrón, lo que hace que su código sea más predecible y fácil de entender.
• Reutilizabilidad: Los bloques y elementos se pueden reutilizar en diferentes partes de un proyecto.
• Fácil mantenimiento: Otros desarrolladores pueden leer y modificar fácilmente su código.
• Evita conflictos: BEM le ayuda a prevenir conflictos CSS entre diferentes componentes.

Cómo utilizar BEM: ejemplos

Ejemplo 1: un botón simple

Comencemos con un bloque de botones básico y veamos cómo funciona BEM.

HTML:

  Submit

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

Explicación:

• El botón es un bloque que representa el estilo del botón principal.
• botón: primario es un modificador que aplica un fondo azul a esta versión específica del botón.

Ejemplo 2: un componente de tarjeta

Ahora creemos un bloque de tarjetas con un título y una descripción (elementos), y una versión de tamaño pequeño (modificador).

HTML:

  
Title
  
This is a description.

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Explicación:

• tarjeta es un bloque que representa el componente de la tarjeta.
• card__title y card__description son elementos, partes específicas de la tarjeta.
• tarjeta: pequeña es un modificador que reduce el relleno para la versión más pequeña de la tarjeta.

Pros y contras de BEM

Ventajas:

1. Organizado y consistente: Ayuda a mantener tu CSS limpio y bien estructurado.
2. Evita conflictos de CSS: Reduce el riesgo de que los estilos de un componente afecten a otro.
3. Reutilizabilidad: Los bloques y elementos se pueden utilizar en varios lugares de un proyecto.
4. Fácil de mantener: Facilita la actualización y administración de CSS, incluso a medida que su proyecto crece.

Contras:

1. Nombres de clase largos: Los nombres de clase BEM pueden ser bastante largos, lo que puede parecer abrumador al principio.
2. Curva de aprendizaje: Lleva algún tiempo acostumbrarse a la estructura BEM, especialmente si eres nuevo en CSS.

¿Por qué BEM es importante?

BEM es una metodología CSS popular porque promueve un código limpio y escalable. En proyectos grandes, CSS puede volverse rápidamente difícil de administrar. Con BEM, cada nombre de clase es único y descriptivo, lo que facilita la comprensión del propósito de cada clase. También evita problemas como conflictos de estilo y facilita la colaboración entre desarrolladores.

Si desea una forma consistente y modular de escribir CSS, BEM es una excelente opción. Puede que le lleve algún tiempo aprenderlo, pero a la larga, le ahorrará tiempo y mejorará su CSS. más fácil de mantener.

Conclusión

La convención de nomenclatura BEM es una excelente manera de mantener tu CSS organizado y escalable. Ayuda a evitar conflictos, hace que su código sea más fácil de mantener y promueve componentes reutilizables. Aunque puede parecer un desafío al principio debido a los nombres largos de las clases y la curva de aprendizaje, los beneficios superan con creces las desventajas. Si buscas escribir CSS más limpio y mejorar la colaboración en tus proyectos, ¡prueba BEM!

¡Sígueme para más actualizaciones!

Espero que este artículo te haya resultado útil para comprender las convenciones de nomenclatura de CSS BEM. Si desea mantenerse actualizado sobre más artículos como este, consejos e ideas sobre desarrollo web, asegúrese de seguirme. No dude en comunicarse si tiene alguna pregunta o sugerencia. ¡Me encantaría saber de ti!