Combinar la metodología BEM con styled components en un proyecto de React te permite escribir CSS-in-JS más limpio, modular y fácil de leer. Si trabajas con componentes reutilizables, esta mezcla te ayuda a organizar bloques, elementos y modificadores sin saturar el HTML con clases largas. Aquí verás cómo se hace paso a paso usando un refactor real.

¿Cómo se estructura un proyecto React con BEM y styled components?

El primer cambio importante ocurre en la organización de carpetas. En lugar de tener una sola carpeta components con todo mezclado, el refactor separa el código en tres grupos claros.

• Bloques: componentes principales como card, header y pills.
• Contenedor: la vista que llama y combina todos los bloques y elementos.
• Elementos: piezas reutilizables más pequeñas, como un loader.

Esta separación refleja directamente la lógica de BEM, donde cada bloque es independiente y puede contener sus propios elementos y variaciones. Y aquí viene lo interesante: al usar styled components, ya no necesitas escribir clases con guion bajo doble o guion medio doble en el HTML.

¿Qué es BEM? Es una metodología CSS que organiza el código en bloques, elementos y modificadores para evitar conflictos de estilos y facilitar el mantenimiento.

¿Cómo se ve la sintaxis de BEM dentro de styled components?

En HTML tradicional con BEM verías clases como card__header o card__figure. Con styled components, esa misma idea se traduce a una notación con punto que se siente mucho más natural en React.

En la vista principal el código queda así de simple: Card.Header, Card.Figure, Card.Title. Cada bloque expone sus elementos como propiedades, y tú los invocas con la sintaxis de objeto. El resultado se lee como una jerarquía clara: sabes que Card es el bloque y que todo lo que viene después del punto pertenece a ese bloque.

Lo mismo aplica para Pills, que en este proyecto vive dentro de la card en su parte inferior. Tiene sus propios elementos hijos, como una Pill, y mantiene su independencia como bloque.

¿Cómo se construye un bloque con styled components paso a paso?

Dentro de la carpeta card vas a encontrar dos archivos clave que definen la arquitectura del bloque.

• index.js: archivo principal donde se ensambla el componente.
• style.js: archivo donde vive todo el CSS-in-JS del bloque.

En index.js se importan los elementos que forman parte del bloque, como Header, Figure o Image. Luego, con styled components, defines el contenedor principal del bloque y le aplicas todas sus propiedades y valores CSS dentro del mismo archivo.

Después viene el truco de la notación con punto. Escribes algo como Card.Header = Header y Card.Figure = Figure, asignando cada elemento como propiedad del bloque principal. Finalmente exportas Card y, desde el contenedor, solo llamas Card.Header, Card.Figure o Card.Image según necesites.

¿Por qué usar styled components con BEM en React? Porque combina el encapsulamiento de estilos de CSS-in-JS con la claridad jerárquica de BEM, y elimina la necesidad de escribir clases largas en el JSX.

¿Cómo se estructura un elemento individual?

Cada elemento, como Figure, sigue el mismo patrón interno. Importas styled components, creas el componente estilizado y le añades el sufijo Block al nombre para distinguirlo. Después defines un componente normal de React que retorna ese elemento estilizado, y lo exportas.

Esto crea un encapsulador limpio que puedes reutilizar en el contenedor sin preocuparte por los estilos. Es la misma estructura para todos los elementos del bloque, lo que hace el código predecible y fácil de mantener.

¿Qué ventajas tiene esta combinación en proyectos React?

La mezcla de BEM con styled components te da varios beneficios concretos que notarás desde el primer refactor.

• Lectura clara: la notación Bloque.Elemento reemplaza las clases con guiones bajos.
• Organización modular: cada bloque vive en su propia carpeta con su lógica y sus estilos.
• Encapsulamiento: los estilos no se filtran a otros componentes.
• Escalabilidad: añadir nuevos elementos a un bloque es directo y consistente.

Si ya manejas BEM en proyectos con HTML y CSS tradicional, dar el salto a esta arquitectura en React se siente como una evolución natural. El siguiente paso es explorar Atomic Design, que lleva esta lógica de bloques y elementos a un nivel aún más granular.

¿Ya habías visto esta combinación antes o es completamente nueva para ti? Cuéntame en los comentarios si vas a aplicarla en tus proyectos o si tienes otra forma de mezclar BEM con styled components.