BEM
¿Estás cansado del código CSS desordenado y desorganizado? ¿Tiene dificultades para leer, mantener y escalar sus proyectos de desarrollo front-end? Si es así, no estás solo. La buena noticia es que existe una solución a estos problemas y se llama BEM.
BEM, abreviatura de Block Element Modifier, es una metodología CSS popular que simplifica el proceso de escritura de código CSS. Al dividir los estilos en bloques, elementos y modificadores, BEM facilita la comprensión y manipulación de su código CSS. En este artículo, le presentaremos BEM y le explicaremos cómo funciona. Obtendrá una comprensión básica de BEM y aprenderá cómo comenzar a usarlo en sus proyectos.
¿Qué es BEM?
BEM significa Block Element Modifier, que es una metodología CSS popular utilizada para el desarrollo front-end. Su objetivo principal es ayudar a organizar, mantener y escalar el código CSS en proyectos grandes. Esta metodología divide los estilos en tres componentes principales:
1. Bloques
2. Elementos
3. Modificadores
Exploremos cada uno de estos componentes con más detalle.
Bloques
Bloquear
Los bloques son los principales componentes de BEM. Representan una entidad independiente que contiene todo el HTML y CSS relevante. Por ejemplo, un encabezado, menú de navegación o sección con contenido relacionado podría ser un bloque.
Un bloque debe recibir un nombre según su propósito y el nombre debe ser único en todo el proyecto. Se recomienda utilizar una convención de nomenclatura con guiones para los bloques, como “contenedor de encabezado” o “menú de navegación”.
Los bloques se definen mediante un nombre de clase que comienza con el nombre del bloque, seguido de dos guiones bajos. Por ejemplo, para crear un bloque para un encabezado, usaríamos el nombre de clase “encabezado__”. Esto nos dice que cualquier estilo CSS que siga está relacionado con el bloque de encabezado.
Ejemplo de bloque BEM:
El doble guión es un separador de elementos que pertenecen al bloque. Cubriremos esto con más detalle en la siguiente sección.
Elementos
Elemento
Los elementos son hijos de bloques y se utilizan para crear estilos más específicos. En BEM, se utiliza un doble guión bajo (__) para separar el bloque y el elemento. Los elementos también tienen nombres de clases separados, lo que los hace fáciles de identificar en su código CSS.
Por ejemplo, digamos que tienes un bloque llamado “navegación”. Dentro de ese bloque tienes varios elementos como “menú”, “enlace” y “desplegable”. Para diseñar el elemento “enlace”, usaría el nombre de clase “navigación__enlace”. Esto le dice al navegador que este elemento pertenece al bloque de “navegación” y es un elemento dentro de ese bloque llamado “enlace”.
El uso de elementos en BEM ayuda a mantener el código organizado y fácil de leer. También facilita la realización de cambios en elementos específicos sin afectar otras partes de su código.
Al seleccionar elementos en su código CSS, es importante utilizar la convención de nomenclatura BEM para que su código siga siendo consistente y fácil de entender.
Modificadores
Modificador
Los modificadores son una característica poderosa de BEM que le permite crear variaciones de bloques y elementos sin tener que crear nuevos nombres de clases. Los modificadores se utilizan para cambiar la apariencia de un elemento o bloque según ciertas condiciones, como el estado, el tema o el tamaño.
Los modificadores se indican con un doble guión ( — — ) seguido del nombre del modificador. Los modificadores se pueden aplicar a bloques o elementos y también se pueden combinar con otros modificadores para crear un efecto más complejo.
Por ejemplo, digamos que tiene un bloque llamado “botón” al que desea darle un estilo diferente cuando está en estado “deshabilitado”. Podrías crear un modificador para el estado “deshabilitado” como este:
La clase “botón–deshabilitado” contendría los estilos necesarios para diseñar el botón en un estado deshabilitado. Al mantener el modificador como una clase separada, puede agregarlo o eliminarlo fácilmente usando JavaScript u otro código sin afectar los estilos básicos del “botón”.
También puedes usar modificadores para crear variaciones de elementos dentro de un bloque. Por ejemplo, digamos que tienes un bloque llamado “tarjeta” que contiene una imagen. Podrías crear un modificador para que la imagen sea circular, como esta:
El título del contenido de la tarjeta va aquí.
La descripción del contenido de la tarjeta va aquí.
La clase “card__image — circular” contendría los estilos necesarios para hacer que la imagen sea circular, mientras que las clases “card__image” y “card__content” contendrían los estilos base para la imagen y el contenido, respectivamente.
De esta manera, los modificadores pueden ayudarle a crear diseños complejos y flexibles sin sacrificar la claridad o la facilidad de mantenimiento.
Ejemplo de código de BEM
A continuación se muestra un ejemplo de cómo se puede estructurar un bloque utilizando la metodología Block Element Modifier (BEM) en HTML y CSS:
// Código HTML:
Título del bloque
El contenido del bloque va aquí.
// Código CSS:
.bloquear {
/* Estilos de bloque */
}
.bloque__título {
/* Estilos de título de bloque */
}
.bloque__texto {
/* Bloquear estilos de texto */
}
.bloque__elemento {
/* Estilos de elementos de bloque */
}
En este ejemplo, tenemos un bloque con la clase “bloque”. Dentro del bloque, tenemos un título de bloque con la clase “block__title”, un texto de bloque con la clase “block__text” y un elemento de bloque con la clase “block__element”. Cada elemento dentro del bloque sigue la convención de nomenclatura BEM mediante el uso del doble guión bajo “__” para separar el bloque y el elemento.
También se pueden agregar modificadores a elementos y bloques para representar diferentes estados o variaciones. A continuación se muestra un ejemplo de un bloque modificado:
// Código HTML:
Título del bloque
El contenido del bloque va aquí.
// Código CSS:
.bloquear {
/* Estilos de bloque */
}
.block–resaltado {
/* Estilos modificadores para el bloque resaltado */
}
.bloque__título {
/* Estilos de título de bloque */
}
.bloque__texto {
/* Bloquear estilos de texto */
}
.block__text–grande {
/* Estilos modificadores para texto de bloque grande */
}
.bloque__elemento {
/* Estilos de elementos de bloque */
}
.block__element–oculto {
/* Estilos modificadores para elementos de bloque ocultos */
}
En este ejemplo de bloque modificado, agregamos el modificador “bloque – resaltado” al bloque principal, el modificador “bloque__texto – grande” al texto del bloque y el modificador “bloque__elemento – oculto” al elemento del bloque. Las reglas CSS para estos modificadores se definen por separado para aplicar los estilos deseados.
¿Por qué utilizar BEM?
BEM es una metodología popular para el desarrollo front-end que ofrece muchos beneficios sobre otros enfoques. Aquí hay algunas razones por las que debería considerar usar BEM:
BEM
Organización CSS mejorada
El enfoque modular de BEM facilita la organización de su código CSS y lo mantiene limpio y legible. Al dividir los estilos en bloques, elementos y modificadores, puede crear una jerarquía clara y estructurada que sea fácil de navegar y mantener.
Mayor legibilidad
Con las convenciones de nomenclatura de BEM, es fácil entender qué hace cada clase y cómo se relaciona con otros elementos de la página. Esto facilita trabajar con grandes bases de código y colaborar con otros miembros del equipo.
Colaboración más sencilla en grandes proyectos
La estructura modular y las convenciones de nomenclatura de BEM facilitan el trabajo en grandes proyectos con varios desarrolladores. Al utilizar las mismas convenciones de nomenclatura y estructura, todos pueden trabajar de manera más eficiente y evitar conflictos.
En general, BEM es una metodología poderosa que puede ayudarlo a crear código CSS más organizado, legible y mantenible. Al adoptar BEM en sus proyectos, puede mejorar su flujo de trabajo y crear mejores sitios web y aplicaciones.
Usando BEM en tus proyectos
Ahora que tiene un conocimiento básico de BEM, es hora de comenzar a usarlo en sus propios proyectos. A continuación se ofrecen algunos consejos para implementar BEM de forma eficaz:
Estructura tus clases
Al crear nombres de clases BEM, es importante estructurarlos de una manera que tenga sentido y siga un patrón coherente. Utilice nombres de bloques que sean descriptivos y fáciles de entender, y sea coherente con sus convenciones de nomenclatura.
Escribir código limpio
Una de las principales ventajas de BEM es que hace que su código CSS sea más fácil de leer y mantener. Sin embargo, esto sólo funciona si escribe código limpio y bien organizado. Asegúrese de utilizar sangría y espaciado para que su código sea fácil de seguir.
Evite errores comunes
Hay algunos errores comunes que cometen los desarrolladores al usar BEM, como usar demasiados modificadores o crear nombres de clases demasiado complejos. Asegúrese de seguir las mejores prácticas y evitar estos errores para aprovechar BEM al máximo.
Integre BEM con otras metodologías CSS
BEM es sólo una de las muchas metodologías CSS que existen. Sin embargo, se puede utilizar junto con otras metodologías para crear un enfoque más completo para la organización CSS. Por ejemplo, podría utilizar BEM para convenciones de nomenclatura y SMACSS para estructurar sus archivos CSS.
Si sigue estos consejos y mejores prácticas, puede comenzar a utilizar BEM para organizar su código CSS y mejorar la legibilidad y el mantenimiento de sus proyectos.
BEM frente a otras metodologías CSS
Si bien BEM es sólo una de muchas metodologías CSS, se destaca por su enfoque de la organización y escalabilidad de CSS. Otras metodologías populares, como SMACSS y OOCSS, tienen sus propios beneficios, pero muchos desarrolladores han descubierto que BEM es la más eficaz para sus necesidades.
Ventajas de BEM
Una de las principales ventajas de utilizar BEM es su enfoque en la modularidad. Al dividir los estilos en bloques, elementos y modificadores, BEM facilita la lectura y el mantenimiento del código CSS, incluso cuando los proyectos crecen y se vuelven más complejos.
BEM también fomenta el uso de nombres de clases descriptivos, que facilitan la comprensión del propósito de cada regla CSS. Esto puede resultar especialmente útil para equipos más grandes, que pueden necesitar colaborar en la misma base de código.
SMACSS y BEM
SMACSS (Arquitectura escalable y modular para CSS) es otra metodología CSS popular, que se centra en la creación de reglas CSS que se pueden reutilizar en todo un proyecto. Si bien SMACSS y BEM tienen algunas similitudes, SMACSS pone más énfasis en la separación de preocupaciones, con estilos organizados en categorías Base, Diseño, Módulo, Estado y Tema.
Si bien SMACSS puede ser eficaz para proyectos más pequeños, muchos desarrolladores han descubierto que BEM es más sólido y escalable para proyectos más grandes. El enfoque de BEM en la creación de bloques independientes y nombres de clases descriptivos puede facilitar el mantenimiento y la actualización del código a medida que los proyectos crecen en tamaño y complejidad.
OOCSS y BEM
OOCSS (CSS orientado a objetos) es otra metodología CSS que se centra en la creación de componentes CSS reutilizables. OOCSS pone más énfasis en la separación de estructura y piel, con estilos organizados en objetos y abstracciones.
Si bien OOCSS y BEM tienen algunas similitudes, el enfoque de BEM respecto de la organización CSS y las convenciones de nomenclatura pueden facilitar la lectura y comprensión del código. El enfoque de BEM en la modularidad también puede facilitar el mantenimiento y la actualización del código con el tiempo.
BEM y diseño responsivo
El diseño responsivo se ha convertido en una parte esencial del desarrollo web moderno. Con el número cada vez mayor de dispositivos y tamaños de pantalla, es importante asegurarse de que su sitio se vea excelente en todas las pantallas. BEM puede ayudarle a crear diseños responsivos que sean fáciles…