html - Is there a painless way to make a "css sandbox"? -
by css sandbox mean section in layout have independent look. need because classes of mine need output "windows" of content in layout, don't want app's css mess them. they're debug related, printing var contents, benchmark graphs or displaying error/exception.
until doing kind of local reset, gets annoying avoid collisions , fail if forget 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; }
i don't know it, think thats more or less shadow dom does
Comments
Post a Comment