Is it ever okay to include inline CSS in plugins?

Normally in a plugin I would add styles using wp_enqueue_style. However, I am currently creating a plugin that only needs a few lines of CSS and I am wondering if it might be better to serve the styles inline to save a request. Obviously there are many advantages to using wp_enqueue_style, but are they worth the extra request for such a small piece of CSS? Is there any accepted ‘best practice’ in this area?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

TL;DR; Enqueue

Using external stylesheet

  • PRO: All your styles are in one spot.
  • PRO: Reduces web page coding.
  • PRO: Easier to maintain the plugin.
  • PRO: Can use hooks to alter location of the file.
  • PRO: Can use hooks to unqueue the file.
  • PRO: Can use minify styles automatically.
  • CON: Might add extra HTTP request (can be overcome).

Using inline styles

  • PRO: Can directly see the style applied.
  • PRO: No extra HTTP requests.
  • CON: Can not use hooks to alter the styles.
  • CON: Can not use hooks to unqueue the styles.
  • CON: Can not minify styles at all.
  • CON: Need !important to override style

Normally I would say: Sure, if you are the only one using it, go ahead and do it inline. But you are talking about a plugin which means the code will be public so aim for extendibility. Right now you only have a few lines of styling:

  • CON: What if that few become more?
  • CON: What if someone extends your plugin?
  • CON: What if someone wants to alter it?
  • CON: What if someone searches for it in css files?
  • CON: What if someone wants to minify it automatically?

Therefore, enqueue. (Preferably Conditionally only if the plugin needs it.)
The same applies to JavaScript. (But that should be included in the footer if possible.)

Method 2

This is hard to answer and I am really not sure if there is an official answer.

I understand the sentiment about saving a request but inline style pretty much always wins. A theme or end user will have a hard time altering your CSS.

With that in mind, I think I’d do this in a publicly released plugin…

  1. if the CSS is absolutely critical to the functioning of the plugin, as is the case with slideshows, for example.
  2. Or, if I also included a filter in the plugin that allows the inline CSS to be altered or removed.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments