Eu estou trabalhando em um CMS. Uma de suas funções é a edição de "pedaços" de HTML em um editor WYSIWYG que são exibidos como páginas individuais.

Eu tenho uma área no CMS onde esses pedaços são visualizados.

Os fragmentos dependem de um arquivo "foundation.css" que é carregado no editor WYSIWYG. Ele faz algumas pequenas reconfigurações, define uma fonte e uma cor de texto padrão e, em geral, é muito simples.

O CMS, obviamente, vem com uma tonelada de declarações CSS, muitas das quais afetam configurações gerais como tamanho da fonte, família, cor, altura da linha, preenchimentos e afins.

Naturalmente, quando tento exibir um fragmento HTML em uma página do CMS, parece diferente de quando é exibido apenas com a folha de estilo foundation.css.

Alguém pode pensar em uma maneira de limpar uma área definida em uma página HTML (digamos, uma DIV) de todas as definições de estilo anteriores? Eu não posso.

um Iframe exibindo o chunk e o embebimento foundation.css ajudaria, mas temo pelo fluxo de trabalho do usuário quando 5-10 IFrames precisam ser renderizados e, em seguida, ajustados em altura via JS quando são carregados. Que nojo.

Pensei em "elevar" todos os outros CSS para uma subclasse (ou seja, ajustar o CSS do CMS), mas isso envolveria tocar muitos arquivos, alguns provavelmente código-fonte do PHP, e prefiro não fazer isso.

Eu não acho que isso tenha uma solução, mas você nunca sabe.