Question

What’s a good way to create a no-conflict version of a CSS stylesheet? Let’s say you have a bunch of code with classes that overlap with Bootstrap’s classes.

Is this valid: adding a class="bootstrap" to the ancestor element under which bootstrap styles should be applied, and then changing bootstrap.css to prefix every rule {} with .bootstrap rule {}?

Answer 1

I don’t see any reason that would not work, but there are probably some performance implications to doing that – I’m not sure if they would even be significant enough to consider. It would probably be a better idea to rename the conflicting classes.

Here are a couple of resources to check out:

http://www.vanseodesign.com/css/css-selector-performance/

https://developer.mozilla.org/en/Writing_Efficient_CSS

And this is from Mozilla’s CSS efficiency guidelines (2nd link): “This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be.”