Reset CSS in a Specific Element

I’m using a charting library that was getting mangled by my global css (foundation css and jqplot). The charting library’s css had certain elements that weren’t styled, but the global css I wrote does. Rather than go into the charting libraries css and make the modification to override each specific css element that was causing it to choke I decided I wanted to reset the css just on the problem area. This way I don’t have to worry about updating the charting library and all my css getting messed up plus I have a reusable method for dealing with these kinds of issues in the future.

Note: For the most part if you have this issue you should probably just override the things that are messing up your styles into a css class. However, in my case it was easier and reusable to do it this way. I’m sure there are other use cases for doing this too!

The Code

Just take one of the fine css resets out there and make a class from it:

.reset{
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}

Now in my problem area I can do something like this:

    <div class="reset" id="chartdiv"></div>

Boom, only this div’s style get’s reset and my chart is functioning again. 

4 Notes/ Hide

  1. alexkehayias posted this