Is it ever okay to include inline CSS in plugins?

3 Views

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?

Post Views: 3

Related posts

Leave a Reply

2 comments

  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.)

  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.