Componente Card en JavaScript con BEM

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:51

Componente Card en JavaScript con BEM

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 8 de 21

Clase 8 / 21

Recursos

Construir un componente Card en JavaScript vanilla te permite entender cómo se arma un elemento reutilizable desde cero, manipulando el DOM, definiendo parámetros y preparando clases con la metodología BEM. Aquí verás el paso a paso para crear esa tarjeta con avatar, título y descripción, lista para estilizarse después con Flexbox.

¿Qué estructura tiene un componente Card en JavaScript?

Antes de escribir código, conviene mirar el diseño en Figma para identificar las piezas. La tarjeta tiene un contenedor principal, una zona de avatar a la izquierda y un bloque de contenido a la derecha con un H3 y un párrafo.

Esa lectura visual define la arquitectura HTML que vas a generar desde JavaScript:

Un div externo que actúa como contenedor de la card.
Un div para el avatar.
Un div de contenido que envuelve el título y la descripción.
Un H3 para el título.
Un p para la descripción.

¿Por qué envolver el título y la descripción en un div de contenido? Porque al usar Flexbox necesitas un wrapper que permita alinear avatar y contenido como hermanos, y dentro del contenido apilar verticalmente el H3 y el párrafo.

¿Cómo defines los parámetros de la función createCard?

La función se exporta como createCard y recibe sus props mediante destructuring. Esto te da control sobre qué cambia entre instancias y qué se mantiene fijo.

Los parámetros que vas a enviar son:

size, que puede ser small o medium y determina la variante visual.
title, el texto que aparece en el H3.
description, el texto del párrafo.

Esa firma de la función es la base para que más adelante puedas reutilizar la card en distintos contextos sin reescribir el componente. La idea es que el componente reciba datos y devuelva HTML listo para insertarse [02:30].

¿Cómo se construye el árbol del DOM con createElement y appendChild?

Dentro de la función accedes al DOM con document.createElement para generar cada etiqueta. Creas un div para la card, otro para el avatar, otro para el contenido, un H3 y un párrafo.

Luego defines la jerarquía con appendChild, que es la forma de decirle al navegador quién es hijo de quién [04:15].

javascript export const createCard = ({ size = 'small', title, description }) => { const card = document.createElement('div'); const avatar = document.createElement('div'); const content = document.createElement('div'); const h3 = document.createElement('h3'); const paragraph = document.createElement('p');

card.appendChild(avatar); card.appendChild(content); content.appendChild(h3); content.appendChild(paragraph);

h3.textContent = title; paragraph.textContent = description;

card.className = ['card', card--${size}].join(' '); avatar.className = 'card__avatar'; content.className = 'card__content';

return card; };

La lógica es simple: la card contiene avatar y contenido como hermanos, y el contenido contiene el H3 y el párrafo como hijos. Esa estructura anticipa el comportamiento que tendrás con Flexbox.

¿Qué hace appendChild exactamente? Inserta un nodo como último hijo de un elemento padre. Es lo que te permite armar el árbol del DOM en memoria antes de devolverlo.

¿Cómo aplicas la metodología BEM al nombrar clases?

BEM significa Block, Element, Modifier y te ayuda a escribir CSS predecible. En esta card el bloque es card, los elementos son card__avatar y card__content, y el modificador es la variante de tamaño.

El tamaño sí cambia el aspecto del bloque, por eso se escribe como card--small o card--medium usando template literals para inyectar el valor del parámetro size. En cambio, avatar y contenido no son modificadores: son partes internas que siempre existen, y por eso llevan doble guion bajo.

Esa convención se traduce en clases como:

card para el contenedor principal.
card--small o card--medium como variante de tamaño.
card__avatar para la zona de imagen.
card__content para el bloque de texto.

¿Cuándo uso modificador en BEM y cuándo elemento? Usa modificador (--) cuando algo cambia el estado o variante visual. Usa elemento (__) cuando es una parte interna fija del bloque.

¿Por qué pensar en Flexbox desde la estructura HTML?

Al envolver avatar y contenido dentro de la card, ya estás preparando el terreno para Flexbox. En la versión small esos dos elementos van lado a lado, mientras que en la versión medium se apilan en columna [06:50].

Tener un wrapper claro evita malabares de CSS más adelante. Le dices al contenedor que alinee a sus hijos en fila o en columna, y el resto fluye solo. Esa decisión arquitectónica es la que hace que el componente sea flexible sin reescribir HTML.

Desarrollar así, anticipando el árbol del DOM y el comportamiento del CSS sin ver el resultado en pantalla, te da agilidad. Cuéntame en los comentarios cómo organizas tú los parámetros de tus componentes reutilizables.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Componente Card en JavaScript con BEM

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos