Stop Plugin from Getting Styles from Other Plugin

Question

My WordPress plugin uses Chosen Select and is supposed to use the css file at my-plugin/assets/resources/chosen.min.css.

Unfortunately, when another plugin also uses Chosen Select, my plugin has a tendency to grab styles from the other css file instead.

For example, it's currently getting styles from yith-woocommerce-ajax-search/plugin-fw/assets/css/chosen/chosen.css which messes up all my custom styling.

What's the best way to make sure an installation of Chosen Select (or other common things that have their own syling) doesn't get styles from other css files?

Here's how I register the stylesheet.

function lsmi_load_admin_script() {
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
    wp_enqueue_style( 'chosencss' );

}

Answer 1

There really is no foolproof method to detect a style sheet from other plugins or from a theme and then "switching them off". You can only guess that other plugins and themes will be using the same handle as you to register the style sheet with. It is however much easier if your plugin is for personal use only, then you can manually go through a plugin, get the handle of the conflicting style sheet and deregister it yourself

You can also give your wp_enqueue_scripts action a very low priority (very high number) in order to load your style sheet as late as possible

add_action( 'wp_enqueue_scripts', 'lsmi_load_admin_script', PHP_INT_MAX );
function lsmi_load_admin_script() 
{
    // Deregister and dequeue other conflicting stylesheets
    wp_dequeue_style( 'chosencss' );
    wp_deregister_style( 'chosencss' );

    // Add your own stylesheet
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
    wp_enqueue_style( 'chosencss' );
}

Answer 2

The best way to avoid CSS/JS conflict between plugins is to enqueue in the right place.

I mean, enqueue the style/script right when the script is needed and not in the registration of the styles/scripts.

function lsmi_load_admin_script() {
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
}

add_action( 'wp_enqueue_scripts' , 'lsmi_load_admin_script' );

/* When you really need the style/script - use it */
function use_my_style () {
    wp_enqueue_style('chosencss');
}

This way, if you don't need a style in a certain page, you can do an if/else, according to the page/post that is going to display the style/script