{"id":19065,"date":"2026-07-27T07:19:00","date_gmt":"2026-07-27T05:19:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-07-28T15:57:58","modified_gmt":"2026-07-28T13:57:58","slug":"como-organizar-componentes-reutilizables-en-mjml","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/","title":{"rendered":"C\u00f3mo organizar componentes reutilizables en MJML"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Cuando empiezas a maquetar emails con MJML, la primera sensaci\u00f3n suele ser bastante agradable: todo parece m\u00e1s limpio que trabajar directamente con tablas HTML, las columnas son m\u00e1s f\u00e1ciles de entender y la estructura general del email resulta menos intimidante. MJML est\u00e1 pensado precisamente para reducir la complejidad de crear emails responsive, usando una sintaxis m\u00e1s legible que despu\u00e9s se transforma en HTML compatible con distintos clientes de correo.<\/p>\n\n\n\n

Pero hay un punto en el que esa comodidad inicial puede empezar a desordenarse: cuando dejas de tener una sola newsletter puntual y pasas a mantener varias campa\u00f1as, automatizaciones, emails transaccionales, cabeceras, footers, banners, bloques de producto, llamadas a la acci\u00f3n y versiones para distintos p\u00fablicos.<\/p>\n\n\n\n

Ah\u00ed aparece la gran pregunta: c\u00f3mo organizar componentes reutilizables en MJML sin convertir el proyecto en una carpeta llena de archivos imposibles de mantener<\/strong>.<\/p>\n\n\n\n

La respuesta no est\u00e1 solo en \u201cseparar archivos\u201d. Est\u00e1 en pensar el email como un peque\u00f1o sistema de dise\u00f1o: con piezas reutilizables, estilos globales, nombres claros, componentes con una responsabilidad concreta y una estructura que permita escalar sin duplicar c\u00f3digo en cada campa\u00f1a.<\/p>\n\n\n\n

Si est\u00e1s dando tus primeros pasos con esta tecnolog\u00eda, antes puede ayudarte leer qu\u00e9 es MJML y por qu\u00e9 facilita la maquetaci\u00f3n de emails responsive<\/a>. Y si ya vienes de trabajar con HTML tradicional, tambi\u00e9n te recomiendo revisar la comparaci\u00f3n entre MJML vs HTML tradicional para emails<\/a>, porque entender esas diferencias ayuda mucho a organizar mejor cualquier proyecto.<\/p>\n\n\n\n

Por qu\u00e9 tiene sentido crear componentes reutilizables en MJML<\/h2>\n\n\n\n

Un email rara vez es una pieza completamente nueva desde cero. Aunque cambie el contenido, muchas partes suelen repetirse: el encabezado, el logo, el footer legal, los botones, los separadores, los m\u00f3dulos de imagen m\u00e1s texto, las tarjetas de producto, las llamadas a la acci\u00f3n o los bloques de art\u00edculos recomendados.<\/p>\n\n\n\n

Si cada email copia y pega esos bloques manualmente, tarde o temprano aparecen problemas: cambios de marca aplicados en unos emails s\u00ed y en otros no, botones con paddings diferentes, footers legales desactualizados, errores visuales por duplicar estructuras complejas y mucho tiempo perdido revisando detalles que ya deber\u00edan estar resueltos.<\/p>\n\n\n\n

Aqu\u00ed es donde la reutilizaci\u00f3n aporta valor. Organizar componentes reutilizables en MJML permite convertir piezas repetidas en bloques consistentes<\/strong>, f\u00e1ciles de mantener y m\u00e1s seguros para producci\u00f3n.<\/p>\n\n\n\n

MJML ya trabaja con una l\u00f3gica basada en componentes. Elementos como <mj-section><\/code>, <mj-column><\/code>, <mj-text><\/code>, <mj-image><\/code> o <mj-button><\/code> permiten construir emails a partir de bloques comprensibles. La clave est\u00e1 en dar un paso m\u00e1s: no usar solo los componentes base de MJML, sino crear una organizaci\u00f3n propia para que el proyecto tenga una l\u00f3gica de sistema.<\/p>\n\n\n\n

Esto cobra todav\u00eda m\u00e1s importancia cuando trabajas newsletters, campa\u00f1as recurrentes o automatizaciones. En esos casos, no solo est\u00e1s dise\u00f1ando un email; est\u00e1s creando una peque\u00f1a biblioteca de piezas que vas a reutilizar muchas veces.<\/p>\n\n\n\n

Qu\u00e9 entendemos por componentes reutilizables en MJML<\/h2>\n\n\n\n

Cuando hablamos de componentes MJML reutilizables<\/strong>, no nos referimos necesariamente a componentes como los de React, Vue o Svelte. En MJML, la reutilizaci\u00f3n puede adoptar varias formas.<\/p>\n\n\n\n

Puede ser un archivo parcial que se incluye en varias plantillas, una secci\u00f3n completa que se repite, un conjunto de estilos globales dentro de <mj-attributes><\/code>, una clase reutilizable con mj-class<\/code> o incluso un bloque de contenido generado desde Node.js antes de compilar el MJML final.<\/p>\n\n\n\n

Lo importante es que el componente tenga una funci\u00f3n clara y pueda reutilizarse sin tener que reescribirlo cada vez.<\/p>\n\n\n\n

<mj-section background-color=\"#F8E0EA\" padding=\"32px 24px\">\n  <mj-column>\n    <mj-text font-size=\"24px\" font-weight=\"700\" color=\"#020101\">\n      T\u00edtulo de la campa\u00f1a\n    <\/mj-text>\n\n    <mj-text font-size=\"16px\" line-height=\"1.6\" color=\"#333333\">\n      Texto introductorio del email.\n    <\/mj-text>\n\n    <mj-button background-color=\"#CC2B5E\" color=\"#ffffff\" border-radius=\"8px\">\n      Leer m\u00e1s\n    <\/mj-button>\n  <\/mj-column>\n<\/mj-section><\/code><\/pre>\n\n\n\n
Este bloque podr\u00eda ser un hero reutilizable. Pero si lo copiamos y pegamos en diez emails, no estamos reutilizando de verdad: solo estamos duplicando una estructura. Para que sea realmente reutilizable, lo ideal es aislarlo dentro de una arquitectura clara.<\/p>\n\n\n\n
Una estructura de carpetas clara para proyectos MJML<\/h2>\n\n\n\n
La organizaci\u00f3n de carpetas es una de las decisiones m\u00e1s importantes. No hace falta complicarla demasiado, pero s\u00ed conviene separar las piezas seg\u00fan su responsabilidad.<\/p>\n\n\n\n
Una estructura pr\u00e1ctica podr\u00eda ser esta:<\/p>\n\n\n\n
emails\/\n  templates\/\n    newsletter.mjml\n    welcome.mjml\n    password-reset.mjml\n\n  components\/\n    header.mjml\n    footer.mjml\n    hero.mjml\n    button-primary.mjml\n    article-card.mjml\n    product-card.mjml\n    divider.mjml\n\n  layouts\/\n    base.mjml\n    marketing-layout.mjml\n    transactional-layout.mjml\n\n  styles\/\n    attributes.mjml\n    fonts.mjml\n    head.mjml\n\n  data\/\n    newsletter.json\n    products.json\n\n  dist\/\n    newsletter.html\n    welcome.html<\/code><\/pre>\n\n\n\n
Esta estructura separa varios niveles. Las templates<\/strong> son los emails finales, como una newsletter, un email de bienvenida o una recuperaci\u00f3n de contrase\u00f1a. Los components<\/strong> son piezas reutilizables peque\u00f1as o medianas, como cabeceras, botones, tarjetas o bloques de contenido.<\/p>\n\n\n\n
Los layouts<\/strong> definen estructuras generales. Por ejemplo, un layout de marketing con hero y CTA, o un layout transaccional m\u00e1s sobrio. Los archivos de styles<\/strong> agrupan configuraci\u00f3n global, fuentes, clases, atributos y estilos comunes. Y la carpeta dist<\/strong> contiene el HTML final compilado, listo para probar o integrar en una herramienta de email marketing.<\/p>\n\n\n\n
La ventaja de esta separaci\u00f3n es que cada archivo tiene un papel claro. No mezclas el contenido de una campa\u00f1a concreta con el estilo global de todos los emails, ni duplicas el footer en cada plantilla.<\/p>\n\n\n\n
C\u00f3mo usar mj-include para dividir archivos<\/h2>\n\n\n\n
Una de las formas m\u00e1s directas de reutilizar piezas en MJML es usar <mj-include><\/code>. Este recurso permite incluir otros archivos dentro de una plantilla principal, lo que resulta muy \u00fatil para cabeceras, footers, bloques repetidos o estilos compartidos.<\/p>\n\n\n\n
Por ejemplo, una plantilla principal podr\u00eda verse as\u00ed:<\/p>\n\n\n\n
<mjml>\n  <mj-head>\n    <mj-include path=\"..\/styles\/attributes.mjml\" \/>\n  <\/mj-head>\n\n  <mj-body background-color=\"#ffffff\">\n    <mj-include path=\"..\/components\/header.mjml\" \/>\n    <mj-include path=\"..\/components\/hero.mjml\" \/>\n    <mj-include path=\"..\/components\/article-card.mjml\" \/>\n    <mj-include path=\"..\/components\/footer.mjml\" \/>\n  <\/mj-body>\n<\/mjml><\/code><\/pre>\n\n\n\n
Esto hace que el email final sea mucho m\u00e1s f\u00e1cil de leer. En lugar de enfrentarte a un archivo enorme de cientos de l\u00edneas, puedes ver la composici\u00f3n general del email de un vistazo.<\/p>\n\n\n\n
Cu\u00e1ndo usar archivos parciales<\/h3>\n\n\n\n
Los parciales funcionan muy bien cuando una pieza se repite en varios emails y no cambia demasiado. Por ejemplo: header corporativo, footer legal, bloque de redes sociales, separadores visuales, banner promocional, m\u00f3dulo de art\u00edculo destacado, CTA final o bloque de aviso legal.<\/p>\n\n\n\n
La clave est\u00e1 en no crear parciales para absolutamente todo. Si fragmentas demasiado, puedes acabar con una arquitectura dif\u00edcil de seguir. Un componente reutilizable debe tener una raz\u00f3n clara para existir<\/strong>.<\/p>\n\n\n\n
Qu\u00e9 no conviene convertir en componente<\/h3>\n\n\n\n
No todo merece ser un componente. Si un bloque solo aparece una vez y no tiene previsi\u00f3n de repetirse, quiz\u00e1 sea mejor dejarlo dentro de la plantilla.<\/p>\n\n\n\n
Tampoco conviene crear componentes demasiado espec\u00edficos, como este:<\/p>\n\n\n\n
hero-black-friday-2026-discount-30.mjml<\/code><\/pre>\n\n\n\n
Ese archivo dif\u00edcilmente ser\u00e1 reutilizable. En cambio, tendr\u00eda m\u00e1s sentido crear algo como esto:<\/p>\n\n\n\n
hero-campaign.mjml<\/code><\/pre>\n\n\n\n
Despu\u00e9s puedes modificar el contenido desde la plantilla, desde variables o desde una fase previa de renderizado si trabajas con Node.js.<\/p>\n\n\n\n
Centralizar estilos con mj-attributes y mj-class<\/h2>\n\n\n\n
Una parte esencial de los componentes reutilizables en MJML<\/strong> es evitar repetir estilos en cada bloque. Si todos los botones tienen el mismo color, border-radius, padding y tipograf\u00eda, no tiene sentido escribir esos atributos una y otra vez.<\/p>\n\n\n\n
MJML permite definir estilos globales dentro de <mj-head><\/code>, especialmente mediante <mj-attributes><\/code>. Esta t\u00e9cnica ayuda a establecer valores por defecto para componentes como <mj-text><\/code>, <mj-button><\/code> o <mj-section><\/code>.<\/p>\n\n\n\n
<mj-attributes>\n  <mj-text\n    font-family=\"Arial, sans-serif\"\n    font-size=\"16px\"\n    line-height=\"1.6\"\n    color=\"#020101\"\n  \/>\n\n  <mj-button\n    font-family=\"Arial, sans-serif\"\n    font-size=\"16px\"\n    font-weight=\"700\"\n    background-color=\"#CC2B5E\"\n    color=\"#ffffff\"\n    border-radius=\"8px\"\n    padding=\"16px 24px\"\n  \/>\n\n  <mj-section padding=\"24px\" \/>\n<\/mj-attributes><\/code><\/pre>\n\n\n\n
Con esta configuraci\u00f3n, cada vez que uses <mj-text><\/code> o <mj-button><\/code>, partir\u00e1s de una base com\u00fan. Despu\u00e9s podr\u00e1s sobrescribir atributos concretos si una pieza necesita un ajuste espec\u00edfico.<\/p>\n\n\n\n
Esta idea conecta muy bien con otras decisiones de dise\u00f1o y desarrollo frontend: crear una base com\u00fan, reducir la repetici\u00f3n y mantener criterios consistentes. Es el mismo principio que aplicamos cuando organizamos estilos, componentes o patrones visuales en una web.<\/p>\n\n\n\n
Crear variantes con mj-class<\/h3>\n\n\n\n
Adem\u00e1s de estilos globales, puedes crear clases reutilizables con mj-class<\/code>. Por ejemplo:<\/p>\n\n\n\n
<mj-attributes>\n  <mj-class\n    name=\"text-muted\"\n    color=\"#666666\"\n    font-size=\"14px\"\n    line-height=\"1.5\"\n  \/>\n\n  <mj-class\n    name=\"heading-lg\"\n    font-size=\"28px\"\n    font-weight=\"700\"\n    line-height=\"1.3\"\n    color=\"#020101\"\n  \/>\n\n  <mj-class\n    name=\"button-secondary\"\n    background-color=\"#753A88\"\n    color=\"#ffffff\"\n    border-radius=\"8px\"\n  \/>\n<\/mj-attributes><\/code><\/pre>\n\n\n\n
Despu\u00e9s puedes aplicarlas as\u00ed:<\/p>\n\n\n\n
<mj-text mj-class=\"heading-lg\">\n  Novedades de la semana\n<\/mj-text>\n\n<mj-text mj-class=\"text-muted\">\n  Una selecci\u00f3n breve de recursos para mejorar tus emails.\n<\/mj-text>\n\n<mj-button mj-class=\"button-secondary\">\n  Ver recursos\n<\/mj-button><\/code><\/pre>\n\n\n\n
Este enfoque se parece mucho a trabajar con tokens o utilidades de dise\u00f1o. Ayuda a mantener consistencia sin llenar cada componente de atributos repetidos.<\/p>\n\n\n\n
Consejo pr\u00e1ctico para nombres de clases<\/h4>\n\n\n\n
Los nombres deben explicar intenci\u00f3n, no apariencia temporal. Es mejor usar nombres como heading-lg<\/code>, text-muted<\/code>, button-primary<\/code> o section-soft<\/code> que nombres como text-gray<\/code>, button-purple<\/code> o pink-section<\/code>.<\/p>\n\n\n\n
\u00bfPor qu\u00e9? Porque la marca puede cambiar de color, pero la intenci\u00f3n del componente se mantiene. Un bot\u00f3n primario seguir\u00e1 siendo primario aunque ma\u00f1ana cambie de rosa a azul.<\/p>\n\n\n\n
Dise\u00f1ar componentes por responsabilidad, no por campa\u00f1a<\/h2>\n\n\n\n
Uno de los errores m\u00e1s comunes al organizar reusable email components<\/em> es pensar en campa\u00f1as concretas en lugar de pensar en responsabilidades.<\/p>\n\n\n\n
Por ejemplo, podr\u00edas tener un archivo llamado:<\/p>\n\n\n\n
newsletter-january-header.mjml<\/code><\/pre>\n\n\n\n
Pero eso lo ata demasiado a una campa\u00f1a concreta. En cambio, conviene pensar en algo m\u00e1s reutilizable:<\/p>\n\n\n\n
header-brand.mjml<\/code><\/pre>\n\n\n\n
La pregunta \u00fatil es: qu\u00e9 hace este componente<\/strong>.<\/p>\n\n\n\n
\u00bfPresenta la marca? \u00bfMuestra una imagen destacada? \u00bfAgrupa un listado de art\u00edculos? \u00bfCierra el email con informaci\u00f3n legal? \u00bfGu\u00eda hacia una acci\u00f3n principal? \u00bfMuestra una tarjeta de producto?<\/p>\n\n\n\n
Si el nombre responde a la funci\u00f3n, ser\u00e1 m\u00e1s f\u00e1cil reutilizarlo en distintos contextos.<\/p>\n\n\n\n
Componentes peque\u00f1os, medianos y grandes<\/h3>\n\n\n\n
No todos los componentes tienen que tener el mismo tama\u00f1o. Puedes pensar en tres niveles.<\/p>\n\n\n\n
Los componentes peque\u00f1os<\/strong> pueden ser botones, separadores, bloques de texto, badges o peque\u00f1os avisos. Los componentes medianos<\/strong> pueden ser tarjetas de art\u00edculo, bloques de producto, m\u00f3dulos de imagen m\u00e1s texto o llamadas a la acci\u00f3n. Y los componentes grandes<\/strong> pueden ser headers, footers, heroes, secciones completas o bloques de campa\u00f1a.<\/p>\n\n\n\n
Esta divisi\u00f3n ayuda a evitar dos extremos: componentes enormes que hacen demasiadas cosas o componentes tan peque\u00f1os que obligan a abrir veinte archivos para entender un email.<\/p>\n\n\n\n
Ejemplo de sistema de componentes MJML para una newsletter<\/h2>\n\n\n\n
Imaginemos una newsletter mensual sobre desarrollo web. Podr\u00edamos definir las siguientes piezas:<\/p>\n\n\n\n
components\/\n  header-brand.mjml\n  hero-newsletter.mjml\n  intro-text.mjml\n  article-card.mjml\n  resource-list.mjml\n  cta-block.mjml\n  footer-legal.mjml<\/code><\/pre>\n\n\n\n
La plantilla final quedar\u00eda mucho m\u00e1s limpia:<\/p>\n\n\n\n
<mjml>\n  <mj-head>\n    <mj-include path=\"..\/styles\/head.mjml\" \/>\n    <mj-include path=\"..\/styles\/attributes.mjml\" \/>\n  <\/mj-head>\n\n  <mj-body background-color=\"#ffffff\">\n    <mj-include path=\"..\/components\/header-brand.mjml\" \/>\n    <mj-include path=\"..\/components\/hero-newsletter.mjml\" \/>\n    <mj-include path=\"..\/components\/intro-text.mjml\" \/>\n    <mj-include path=\"..\/components\/article-card.mjml\" \/>\n    <mj-include path=\"..\/components\/resource-list.mjml\" \/>\n    <mj-include path=\"..\/components\/cta-block.mjml\" \/>\n    <mj-include path=\"..\/components\/footer-legal.mjml\" \/>\n  <\/mj-body>\n<\/mjml><\/code><\/pre>\n\n\n\n
Desde fuera, la plantilla cuenta una historia clara: cabecera, hero, introducci\u00f3n, contenido principal, recursos, CTA y cierre. Eso mejora mucho la mantenibilidad.<\/p>\n\n\n\n
Si est\u00e1s trabajando una primera newsletter desde cero, puedes ampliar esta parte con la gu\u00eda sobre c\u00f3mo crear tu primera newsletter responsive con MJML<\/a>, donde la prioridad est\u00e1 m\u00e1s en la estructura inicial del email y no tanto en la arquitectura de componentes.<\/p>\n\n\n\n
Separar estructura, contenido y presentaci\u00f3n<\/h3>\n\n\n\n
Para proyectos peque\u00f1os, puedes mantener contenido y estructura juntos. Pero si vas a trabajar con muchas campa\u00f1as, es mejor separar tres capas: estructura, contenido y presentaci\u00f3n.<\/p>\n\n\n\n
La estructura<\/strong> define qu\u00e9 bloques existen y en qu\u00e9 orden aparecen. El contenido<\/strong> incluye textos, enlaces, im\u00e1genes y datos variables. La presentaci\u00f3n<\/strong> agrupa estilos globales, colores, tipograf\u00edas, espaciados y clases.<\/p>\n\n\n\n
Esta separaci\u00f3n no tiene que ser perfecta desde el primer d\u00eda. Pero cuanto m\u00e1s crece el proyecto, m\u00e1s se agradece.<\/p>\n\n\n\n
C\u00f3mo trabajar con datos din\u00e1micos y MJML<\/h2>\n\n\n\n
MJML puede integrarse en workflows con Node.js para generar HTML a partir de plantillas. Esto abre una posibilidad interesante: crear emails a partir de datos externos.<\/p>\n\n\n\n
Por ejemplo, podr\u00edas tener un archivo JSON con el contenido de una newsletter:<\/p>\n\n\n\n
{\n  \"title\": \"Recursos de frontend de la semana\",\n  \"intro\": \"Una selecci\u00f3n breve para mejorar tus proyectos.\",\n  \"articles\": [\n    {\n      \"title\": \"C\u00f3mo mejorar la accesibilidad de tus formularios\",\n      \"url\": \"https:\/\/example.com\/articulo-1\"\n    },\n    {\n      \"title\": \"Buenas pr\u00e1cticas para emails responsive\",\n      \"url\": \"https:\/\/example.com\/articulo-2\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
Despu\u00e9s, con un script de Node.js, podr\u00edas generar el MJML final antes de compilarlo a HTML. En ese caso, MJML funciona como capa de presentaci\u00f3n, mientras que los datos vienen de otra fuente: un CMS, una API, un JSON o una base de datos.<\/p>\n\n\n\n
Este enfoque es muy \u00fatil cuando necesitas producir muchas variaciones de un email sin cambiar manualmente cada archivo. Tambi\u00e9n encaja bien con un workflow frontend moderno, donde el c\u00f3digo, los datos y la generaci\u00f3n de archivos pueden formar parte de un proceso automatizado.<\/p>\n\n\n\n
Buenas pr\u00e1cticas para nombrar componentes MJML<\/h2>\n\n\n\n
La nomenclatura parece un detalle menor, pero en proyectos reales marca una gran diferencia. Un buen nombre evita confusi\u00f3n y reduce el tiempo de decisi\u00f3n.<\/p>\n\n\n\n
Conviene usar nombres descriptivos y funcionales. Es mejor article-card.mjml<\/code> que block-1.mjml<\/code>. Tambi\u00e9n es preferible evitar nombres demasiado ligados a una campa\u00f1a concreta. Por ejemplo, promo-banner.mjml<\/code> ser\u00e1 m\u00e1s \u00fatil a largo plazo que summer-sale-2026-banner.mjml<\/code>.<\/p>\n\n\n\n
Mantener una convenci\u00f3n consistente tambi\u00e9n ayuda. Si usas kebab-case, \u00fasalo en todo el proyecto: footer-legal.mjml<\/code>, hero-simple.mjml<\/code>, button-primary.mjml<\/code>.<\/p>\n\n\n\n
Tambi\u00e9n puedes distinguir variantes cuando sea necesario. Por ejemplo: hero-simple.mjml<\/code>, hero-image.mjml<\/code> y hero-centered.mjml<\/code>. Pero es importante no crear variantes innecesarias. Si dos componentes solo cambian una palabra o un color, quiz\u00e1 deber\u00edan ser el mismo componente con estilos o datos distintos.<\/p>\n\n\n\n
Patrones que conviene evitar<\/h2>\n\n\n\n
Organizar componentes reutilizables en MJML tambi\u00e9n implica saber qu\u00e9 no hacer. El primer patr\u00f3n a evitar es copiar y pegar bloques entre emails. Es r\u00e1pido al principio, pero caro a medio plazo. Si el footer cambia, tendr\u00e1s que actualizarlo en todos los emails donde lo hayas copiado.<\/p>\n\n\n\n
Otro error habitual es crear componentes sin criterio. Separar por separar tampoco ayuda. Si cada <mj-text><\/code> vive en un archivo diferente, la plantilla ser\u00e1 dif\u00edcil de leer.<\/p>\n\n\n\n
Tambi\u00e9n conviene evitar mezclar estilos globales con estilos puntuales. Si cada componente redefine tipograf\u00edas, colores y paddings sin seguir una base com\u00fan, acabar\u00e1s con un sistema inconsistente.<\/p>\n\n\n\n
Por \u00faltimo, no hay que olvidar las limitaciones propias del email. MJML simplifica mucho la maquetaci\u00f3n, pero los emails siguen dependiendo de clientes de correo con comportamientos distintos. Por eso es importante revisar qu\u00e9 partes de CSS son realmente seguras. Para profundizar en este punto, puedes leer qu\u00e9 partes de CSS funcionan realmente en email marketing<\/a> y tambi\u00e9n el art\u00edculo sobre limitaciones reales del CSS en clientes de correo<\/a>.<\/p>\n\n\n\n
Organizaci\u00f3n recomendada para un workflow frontend moderno<\/h2>\n\n\n\n
Si trabajas en un entorno frontend moderno, puedes integrar MJML dentro de un flujo con scripts, control de versiones y generaci\u00f3n autom\u00e1tica.<\/p>\n\n\n\n
Una estructura posible ser\u00eda:<\/p>\n\n\n\n
src\/\n  emails\/\n    templates\/\n    components\/\n    layouts\/\n    styles\/\n    data\/\n\nscripts\/\n  build-emails.js\n\ndist\/\n  emails\/<\/code><\/pre>\n\n\n\n
Y en el archivo package.json<\/code> podr\u00edas tener scripts como estos:<\/p>\n\n\n\n
{\n  \"scripts\": {\n    \"build:emails\": \"node scripts\/build-emails.js\",\n    \"watch:emails\": \"mjml src\/emails\/templates -o dist\/emails --watch\"\n  }\n}<\/code><\/pre>\n\n\n\n
La idea es que los emails formen parte del proyecto, no que vivan como archivos sueltos en una carpeta perdida. As\u00ed puedes versionarlos, revisarlos en pull requests, automatizar la compilaci\u00f3n y mantener consistencia entre campa\u00f1as.<\/p>\n\n\n\n
Este enfoque tambi\u00e9n facilita integrar MJML con otras herramientas del ecosistema frontend. Si te interesa esta parte m\u00e1s t\u00e9cnica, puedes continuar con el art\u00edculo sobre c\u00f3mo integrar MJML en un workflow frontend moderno<\/a>.<\/p>\n\n\n\n
Documentar los componentes<\/h3>\n\n\n\n
Si el proyecto crece, conviene crear una peque\u00f1a documentaci\u00f3n interna. No hace falta algo enorme. Puede bastar con un archivo README.md<\/code> donde expliques qu\u00e9 componentes existen, cu\u00e1ndo usar cada uno, qu\u00e9 variantes hay, qu\u00e9 estilos globales est\u00e1n disponibles, c\u00f3mo compilar los emails y qu\u00e9 criterios seguir antes de crear un componente nuevo.<\/p>\n\n\n\n
Esta documentaci\u00f3n evita que cada persona del equipo tome decisiones distintas. Tambi\u00e9n reduce la carga cognitiva, porque no tienes que recordar de memoria c\u00f3mo se construye cada bloque.<\/p>\n\n\n\n
Accesibilidad y componentes reutilizables en emails<\/h2>\n\n\n\n
Cuando organizamos componentes MJML, no deber\u00edamos pensar solo en la parte visual. Tambi\u00e9n conviene tener en cuenta la accesibilidad.<\/p>\n\n\n\n
Un componente reutilizable puede ayudar mucho si ya incluye buenas pr\u00e1cticas desde el principio: textos alternativos en im\u00e1genes relevantes, jerarqu\u00eda clara, botones comprensibles, contraste suficiente y una estructura f\u00e1cil de leer.<\/p>\n\n\n\n
Por ejemplo, si tienes un componente de tarjeta de art\u00edculo, no deber\u00eda limitarse a mostrar una imagen, un t\u00edtulo y un bot\u00f3n gen\u00e9rico de \u201cLeer m\u00e1s\u201d. Ser\u00eda m\u00e1s recomendable que el enlace o el bot\u00f3n tengan un contexto claro, especialmente para personas que navegan con lector de pantalla.<\/p>\n\n\n\n
En lugar de repetir un patr\u00f3n poco descriptivo en todos los emails, puedes resolverlo bien una vez y reutilizarlo en cada campa\u00f1a. Para ampliar este enfoque, puedes revisar la gu\u00eda sobre emails accesibles, contraste, jerarqu\u00eda y lectores de pantalla<\/a>.<\/p>\n\n\n\n
C\u00f3mo decidir si un bloque merece ser componente<\/h2>\n\n\n\n
Antes de crear un nuevo componente, puedes hacerte varias preguntas. La primera es sencilla: \u00bfeste bloque se va a repetir? Si la respuesta es s\u00ed, probablemente merece convertirse en componente.<\/p>\n\n\n\n
Tambi\u00e9n conviene preguntarse si tiene una responsabilidad clara. Un buen componente debe poder explicarse en una frase. Si necesitas demasiada explicaci\u00f3n, quiz\u00e1 ese bloque est\u00e1 mezclando demasiadas funciones.<\/p>\n\n\n\n
Otra pregunta \u00fatil es si depende demasiado de una campa\u00f1a concreta. Si depende de una promoci\u00f3n \u00fanica, quiz\u00e1 no sea reusable. En cambio, si representa un patr\u00f3n que puede volver a aparecer, como una tarjeta, un CTA o un m\u00f3dulo de art\u00edculos, s\u00ed tiene sentido aislarlo.<\/p>\n\n\n\n
Por \u00faltimo, piensa si ese componente mejorar\u00e1 la consistencia del sistema y reducir\u00e1 errores futuros. Un footer legal, un bot\u00f3n principal o un bloque de baja de suscripci\u00f3n suelen beneficiarse mucho de estar centralizados.<\/p>\n\n\n\n
La reutilizaci\u00f3n no consiste en crear m\u00e1s archivos, sino en reducir decisiones repetitivas<\/strong>. Un buen sistema de componentes debe hacer que crear un nuevo email sea m\u00e1s r\u00e1pido, m\u00e1s claro y m\u00e1s fiable.<\/p>\n\n\n\n
Preguntas frecuentes sobre componentes reutilizables en MJML<\/h2>\n\n\n\n
\u00bfMJML permite crear componentes como en React?<\/h3>\n\n\n\n
No exactamente de la misma forma. MJML trabaja con su propio sistema de componentes y permite organizar archivos mediante inclusiones, atributos globales, clases y estructuras reutilizables. Tambi\u00e9n existen formas m\u00e1s avanzadas de crear componentes personalizados, pero para la mayor\u00eda de proyectos de email marketing suele ser suficiente trabajar con parciales, layouts y estilos centralizados.<\/p>\n\n\n\n
\u00bfCu\u00e1ndo deber\u00eda usar mj-include?<\/h3>\n\n\n\n
Deber\u00edas usar <mj-include><\/code> cuando una parte del email se repite en varias plantillas o cuando separar un bloque mejora la legibilidad del archivo principal. Es especialmente \u00fatil para headers, footers, bloques legales, CTAs, m\u00f3dulos de art\u00edculos y estilos compartidos.<\/p>\n\n\n\n
\u00bfEs mejor tener muchos componentes peque\u00f1os o pocos componentes grandes?<\/h3>\n\n\n\n
Depende del proyecto, pero normalmente funciona mejor un equilibrio. Los componentes peque\u00f1os ayudan a reutilizar piezas concretas, mientras que los componentes medianos o grandes facilitan componer emails r\u00e1pidamente. Lo importante es que cada componente tenga una responsabilidad clara y que la estructura completa siga siendo f\u00e1cil de entender.<\/p>\n\n\n\n
Reutilizar componentes tambi\u00e9n es dise\u00f1ar mejor<\/h2>\n\n\n\n
Organizar componentes reutilizables en MJML<\/strong> no es solo una decisi\u00f3n t\u00e9cnica. Tambi\u00e9n es una decisi\u00f3n de dise\u00f1o, de mantenimiento y de experiencia de trabajo.<\/p>\n\n\n\n
Un buen sistema de componentes evita repetir decisiones, reduce errores, mejora la coherencia visual y permite que cada nuevo email parta de una base s\u00f3lida. En lugar de preguntarte cada vez cu\u00e1nto padding debe tener un bot\u00f3n, c\u00f3mo se construye el footer o qu\u00e9 estructura debe seguir una tarjeta, puedes apoyarte en un sistema ya definido.<\/p>\n\n\n\n
Y eso tiene un impacto directo en la calidad final. Porque cuando la estructura est\u00e1 clara, puedes dedicar m\u00e1s energ\u00eda a lo importante: el mensaje, la jerarqu\u00eda, la claridad del contenido y la experiencia de quien recibe el email.<\/p>\n\n\n\n
MJML ya te da una base mucho m\u00e1s amable que el HTML tradicional para emails. Pero la diferencia entre \u201cusar MJML\u201d y \u201ctrabajar bien con MJML\u201d est\u00e1 en c\u00f3mo organizas tus piezas.<\/p>\n\n\n\n
Un proyecto con buenos reusable email components<\/em> no solo es m\u00e1s c\u00f3modo para desarrollar: tambi\u00e9n es m\u00e1s consistente, m\u00e1s escalable y m\u00e1s f\u00e1cil de mantener en el tiempo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Organizar componentes reutilizables en MJML permite crear emails m\u00e1s consistentes, reducir errores y mantener una arquitectura clara en newsletters, campa\u00f1as y automatizaciones. En esta gu\u00eda vemos c\u00f3mo estructurar carpetas, usar mj-include, centralizar estilos y dise\u00f1ar componentes realmente reutilizables.<\/p>\n","protected":false},"author":1,"featured_media":19120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":5,"mg_rating_count":1,"mg_rating_average":5,"footnotes":""},"categories":[82],"tags":[421,422],"class_list":["post-19065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-componentes-reutilizables-en-mjml","tag-email-marketing"],"acf":[],"yoast_head":"\nC\u00f3mo organizar componentes reutilizables en MJML<\/title>\n<meta name=\"description\" content=\"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo organizar componentes reutilizables en MJML\" \/>\n<meta property=\"og:description\" content=\"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-27T05:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-28T13:57:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"C\u00f3mo organizar componentes reutilizables en MJML\",\"datePublished\":\"2026-07-27T05:19:00+00:00\",\"dateModified\":\"2026-07-28T13:57:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/\"},\"wordCount\":3156,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/componentes-reutilizables-mjml.avif\",\"keywords\":[\"componentes reutilizables en MJML\",\"email marketing\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/\",\"name\":\"C\u00f3mo organizar componentes reutilizables en MJML\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/componentes-reutilizables-mjml.avif\",\"datePublished\":\"2026-07-27T05:19:00+00:00\",\"dateModified\":\"2026-07-28T13:57:58+00:00\",\"description\":\"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/componentes-reutilizables-mjml.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/componentes-reutilizables-mjml.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Organizaci\u00f3n visual de componentes reutilizables en MJML para crear emails modulares, consistentes y f\u00e1ciles de mantener.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-organizar-componentes-reutilizables-en-mjml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo organizar componentes reutilizables en MJML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo organizar componentes reutilizables en MJML","description":"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo organizar componentes reutilizables en MJML","og_description":"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2026-07-27T05:19:00+00:00","article_modified_time":"2026-07-28T13:57:58+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"C\u00f3mo organizar componentes reutilizables en MJML","datePublished":"2026-07-27T05:19:00+00:00","dateModified":"2026-07-28T13:57:58+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/"},"wordCount":3156,"commentCount":0,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif","keywords":["componentes reutilizables en MJML","email marketing"],"articleSection":["Blog"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/","name":"C\u00f3mo organizar componentes reutilizables en MJML","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif","datePublished":"2026-07-27T05:19:00+00:00","dateModified":"2026-07-28T13:57:58+00:00","description":"Aprende c\u00f3mo organizar componentes reutilizables en MJML para crear emails m\u00e1s consistentes, escalables y f\u00e1ciles de mantener.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/componentes-reutilizables-mjml.avif","width":1536,"height":1024,"caption":"Organizaci\u00f3n visual de componentes reutilizables en MJML para crear emails modulares, consistentes y f\u00e1ciles de mantener."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-organizar-componentes-reutilizables-en-mjml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo organizar componentes reutilizables en MJML"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=19065"}],"version-history":[{"count":3,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19065\/revisions"}],"predecessor-version":[{"id":19824,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19065\/revisions\/19824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/19120"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=19065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=19065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=19065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}