Clear bootstrap styling for part of a page

Question

I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.

The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:

1. Move preview into an iframe
2. Apply some kind of clear/reset css to the element where I host the preview

eg:

<div id="preview" class="clean-css">
</div>

.clean-css {
    div, p: {
        border: 0;
        margin: 0;
    }
    /* a bunch of reset css stuff here */
}

I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).

I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.

• Is there a more comprehensive clear css solution out there?
• Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?

Answer 1

After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.

There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).

iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.