Is there a painless way to make a "css sandbox"?

Question

By CSS sandbox I mean a section in my layout that have a completely independent look. I need this because some classes of mine need to output some "windows" of content in the layout, but I don't want the app's css to mess with them. They're mostly debug related, like printing var contents, benchmark graphs or displaying some error/exception.

Until now I was doing some kind of local reset, but this gets really annoying to avoid collisions and could fail if I forget some rules. ex:

html body div.eh-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    vertical-align: baseline !important;
    background-color: #fff !important;
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 20px !important;
}

html body div.eh-box * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    color: #333 !important;
}

html body div.eh-box .title {
    font-size: 50px !important;
    line-height: 75px !important;
    /*font-weight: bold !important;*/
}

html body div.eh-box .desc {
    font-size: 24px !important;
    line-height: 36px !important;
}

Answer 1

I don't know much about it, but I think thats more or less what Shadow DOM does