Disabling Bootstrap CSS inside a certain container, stop overriding css

Question

I am currently using bootstrap and knockoutjs to display a webpage that has a live preview of some data. For instance, a user enters a title, in a textbox, on the left hand side. Then, the right hand side of the page updates to format that text based on some other settings. So it might be something like <h1>{title}</h1> or it might be <u>{title}</u>. However, all that is requested from the user, at this point, is the title in plain text.

The issue is, as the preview is actually a HTML document created by the users. So, some of the bootstrap CSS overrides the CSS specified by the users. So the above <h1> will inherit bootstraps h1 CSS class, rather than using whatever is in the users HTML template. This means at the time of using the created document, the preview may differ to what is actually happening.

JSFiddle example: http://jsfiddle.net/Piercy/4fcmk/

HTML:

<div class="content">
<h1>Header 1</h1>

    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .header
            {
                color: red;
            }
        </style>
        <h1 class="header">Header Class</h1>
        <!-- End Html Template -->
    </div>
</div>

CSS:

.content h1
{
    color: blue;
}

The user would expect "Header Class" to be red as they do not know anything about the content css. In my code i am using bootstrap but this shows a simplified version of the issue. Normally, you would just make the CSS more specific but because the user doesn't know about bootstrap (or in the jsFiddle example content) we can't really expect them to modify the CSS.

I need to try figure a way to either stop a certain container (preview div in the jsFiddle) using the stylesheet thats being used by it's parent or figure a way i can modify the bootstrap CSS so that overriding issues are less likely.

Of course, sticking it in an iframe would accomplish this but then I will have issues trying to access and modify the preview.

I am open to all ideas, just want to try find the most appropriate way to deal with this situation. I found this rather difficult to put down on paper so I apologise if it is hard to understand.

Answer 1

To my understanding, there is no way to tell CSS to not inherit styles. However, here's an interesting idea for a workaround.

Take the bootstrap.css file and drop it into your CSS preprocessor of choice (I used LESS).

Next, wrap ALL of the styles with an ID or class of bootstrap like this:

#bootstrap { ...all the bootstrap styles go here. }

Then, save it as a .less file and compile it. Your result will be all the bootstrap styles inheriting from #bootstrap or .bootstrap (depending whether you used an ID or class to wrap bootstrap's styles).

Finally, wrap whatever markup in your template that your users will not be editing in a div and give this div an id of #bootstrap or class of .bootstrap, and include only the bootstrap file we just processed using LESS.

That takes care of the user's CSS not inheriting from bootstrap. However, your users can still write styles that bootstrap will inherit. To get around this, wrap the user's content in an id or class of something like #user or .user and ask them to begin all of their styles with .user > likes this:

.user > h1 {color: red;}
.user > p {font-size: 18px;} 

This should separate your HTML template's styles from your users' styles - it just takes a little bit more work from your users.

Here's a jsfiddle to demonstrate: