How to avoid conflict of wordpress plugin css and theme css?

Question

I have used twitter bootstrap to my Wordpress plugin. But after install the plugin, it is changing style of the theme that has already bootstrap. How can i avoid this conflict? I have added bootstrap to the plugin as follows

    function newsbox_style_and_script()
    {   
         wp_enqueue_style( 'bootstrap-style', plugins_url( '/css/bootstrap.min.css', __FILE__ ),array(),'3.0.3');

    }
     add_action( 'wp_enqueue_scripts', 'newsbox_style_and_script' );

Please tell the solution.

Answer 1

Basically you can't avoid the conflict by using the default bootstrap CSS, because you can't know how the bootstrap CSS handle is named when being enqueued/registered in the theme. There is even an possibility that the bootstrap CSS isn't enqueued in the theme (in some bad code style themes).

However, there is a solution for your case - the best you can do is:

• Prefix all selectors in your plugin's boostrap CSS file

• Use the LESS/SASS version of bootstrap for your plugin - both LESS and SASS support namespacing (as mentioned here - How to namespace Twitter Bootstrap so styles don't conflict).

• Add a setting to the plugin to globally disable your plugin's bootstrap CSS

• Build your plugin logic so your bootstrap CSS is enqueued only on the pages where it's necessary.