Estoy trabajando en un CMS. Una de sus funciones es la edición de "fragmentos" HTML en un editor WYSIWYG que se muestran como páginas individuales.

Tengo un área en el CMS donde se previsualizan estos trozos.

Los fragmentos se basan en un archivo "foundation.css" que se carga en el editor WYSIWYG. Realiza algunos restablecimientos pequeños, define una fuente predeterminada y el color del texto, y en general es muy simple.

El CMS, obviamente, viene con una tonelada de declaraciones CSS, muchas de las cuales afectan configuraciones generales como tamaño de fuente, familia, color, altura de línea, rellenos y similares.

Naturalmente, cuando intento mostrar un fragmento HTML en una página de CMS, se ve diferente cuando se muestra solo con la hoja de estilo foundation.css.

¿Alguien puede pensar en una forma de limpiar un área definida en una página HTML (por ejemplo, un DIV) de todas las definiciones de estilo anteriores? No puedo

Un Iframe que muestre el fragmento e incrustar foundation.css ayudaría, pero temo por el flujo de trabajo del usuario cuando se deben renderizar 5-10 IFrames y luego ajustarlos en altura a través de JS una vez que se cargan. Puaj

He pensado en "elevar" todos los demás CSS a una subclase (es decir, ajustar el CSS de CMS), pero eso implicaría tocar muchos archivos, algunos probablemente código fuente de PHP, y preferiría no hacerlo.

No creo que esto tenga una solución pero nunca se sabe.