Duplicated CSS files using wp_enqueue_style()

Question

I've noticed that in the source code of my website there is Font Awesome loaded five times. Loaded versions are 3.2.1, 4.0.1, 4.1.0 and more. Shortcodes plugins, page builders, the theme and/or plugins designed to load Font Awesome like Better Font Awesome load its own version of this.

The theme I'm using loads it this way:

wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css', array(), '4.1.0' );

But its previous version used to use this:

wp_enqueue_style( 'themename-fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css' );

Plugins use various hooks and formats:

wp_enqueue_style( 'pluginname-fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css', array(), '4.0.1' );
wp_enqueue_style( 'pluginname-fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css' );
wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css', array(), '3.2.1' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css' );

I'm developing a plugin and I initially wanted to load Font Awesome with this:

wp_enqueue_style( 'my-plugin-name-fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css', array(), '4.1.0' );

But then I came to conclusion that the most correct way to load it would be this:

wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '/css/fontawesome/font-awesome.min.css', array(), '4.1.0' );

Can someone confirm what would be the best naming standard for loading this in my plugin and if it's possible at all to stop other plugins from loading their versions of that if my version is the newest one?

I don't want to have Font Awesome loaded 5 times (30kB each) and some older versions should not be loaded but I'd like to keep using the theme, shortcodes plugins and page builders that I'm currently using.

Answer 1

Naming conventions for scripts and styles have always been a difficult issue in WordPress plugins, with many different conventions used and often causing conflicts. I'll try to give my view on this matter, and elaborate where necessary.

Let me start off by stating my opinion on the example in your question: in my opinion, only fontawesome is a suited handle.

First of all, let me differentiate between plugin-specific and non-plugin-specific scripts and styles. The former group consists of scripts and styles that are only useful to that specific plugin or theme, whilst the latter consists of all scripts and styles that can be used across products (in most cases, WordPress stylesheets or JavaScript libraries).

Plugin-specific scripts and styles

In my opinion, plugin-specific scripts and styles should always be prefixed with a plugin prefix. For example, for Advanced Custom Fields, an admin script that needs to be included on all admin pages could be registered as acf-admin (using wp_register_script( 'acf-admin', .. )).

Non-plugin-specific scripts and styles

This is a more difficult choice, and there are several considerations that have to be made:

1. Should I add a version number to the handle?
2. Should I prefix it with my plugin prefix?
3. Should I prefix it with its parent library name?

In my opinion, the answer to questions one and two are a clear "no".

Should I add a version number to the handle?

Multiple versions of the same script or style are in just about all cases not intended to co-exist in a single page. Adding a version number to the handle of a script or style implies that each product version is an entirely different product. This is also how WordPress does it: the jQuery library has the handle "jquery", and not "jquery-[version]".

Should I prefix it with my plugin prefix?

Plugins and themes should all rely on a single version of a script or style. Prefixing a handle with a plugin prefix implies that the script or style is product-specific, which it isn't. This is exactly the case in your example: each product deems the script specific to their product, whilst it is, in fact, more of a library.

Adding a version number or plugin prefix to the handle of a script or style eliminates a big part of the use of registering scripts and style with a unique handle.

Should I prefix it with its parent library name?

If a library is fully dependent upon a single library and thereby more of an extension to a library, it should be prefixed with the "parent" library name or prefix. If you have created a jQuery plugin called "inline-edit", for example, you should use the handle jquery-inline-edit. This is done the same way in WordPress core: the Sortable library for jQuery is called "jqeury-sortable" and not just "sortable" (as other, non-jQuery-dependent sorting libraries might very well exist).