How to deal with CSSs that conflict/clash with CQ's CSSs?

Question

Hi there,
I am working on building a website in CQ that uses free styles from www.99lime.com.  This is a requirement of the client, not my personal choice.
The problem is that the kickstart styles are conflicting/clashing with CQ, such that when I open a page in the Content Finder, the Sidekick - Components tab is empty; if I go into Design mode to ensure components are selected, the Component lists don't display; I see the component groups (general, etc) but then a bunch of lines.  When I comment out the kickstart.css, the Sidekick displays correctly so that's how I know the kickstart styles are the issue.
How do I resolve these conflicts without having to rename every element in the kickstart css's?
Thanks in advance.
New CQ User.

Answer 1

You can uses CSS selectory specificity to help. Add a class to the wrapping div or body for your apps pages ex .kickstarter. Then just prefix each selector with the .kickstarter class.
Using LESS you can just wrap the whole of the file in a single nested rule like so:
.kickstarter {
    HTML ELEMENTS
    a{color:#4D99E0;outline:0;}
    a:active{color:inherit;}
    a:visited{}
    a:hover{}
    a img{border:0;}
    strong,b{color:#000;background:lightyellow;position:relative;top:0;left:0;padding:2px 5px;}
    strike{}
    em,i{}
    .hide{display:none;}
    .show{display:block;}