How can i avoid conflicts of two css frameworks?

Question

I am using Foundation CSS framework and Kendo UI grid in my project The Kendo UI grid sometimes overridden by foundation CSS thing.

How can I avoid this conflicts?

Answer 1

To be honest, I don't think there is a way that you can do this. A browser will load all stylesheets in the order they are placed on your page. When there are selectors that is used in more stylesheets, the last occurrence takes precedence (meaning: it's the one that your browser will use).

You can add a third stylesheet in which you fix everything that gets overwritten by mistake, or you can try switching the Foundation css and the kendo grid UI css

Answer 2

What you're looking for is namespacing. As far as I'm aware there's no built in way to do this, but the question has been asked before:

• Namespacing the Bootstrap and Foundation CSS frameworks