A WordPress plugin or theme should never have to output inline styles, especially not in the frontend. Inline styles will prevent some doctypes from validating and they are actually a factor to slow down your page loads.
If your plugin outputs a piece of code that needs styling, add an ID to the output and output the style using a style tag in the <head>. Next to that you should add an option to remove the style altogether, and tell users how to add the CSS to their own theme’s stylesheet.
Seriously. I get so annoyed when a plugin doesn’t allow me to add its CSS to my own stylesheet.
… or even better, when it’s adding a load of generic named styles in the
headthat overwrites the stylesheet’s styles.Please. Use. Unique. Style. Identifiers. kthxbye!
I am one of the person who uses Shared hosting, So minimizing load on server is essential to me!
Thanks for sharing the small but useful post. :)
Yes its better to not us inline styles in your plugin files.. My question if my plugin is providing options in wp-admin to change background color or width of a slider.. How should i add these kind of styles in tag? using in tag? or anything else you will suggest?
Yes its better to not us inline styles in your plugin files.. My question if my plugin is providing options in wp-admin to change background color or width of a slider.. How should i add these kind of styles in head tag? using style tag in head tag? or anything else you will suggest?
And if, per instance, the plugin just works on certain pages or posts, the css added by the plugin shouldn’t load in all the pages/posts of a website!
Agreed, though I have to say that is hard to do at times, for instance with shortcodes…
Yes, good point. This is why, as suggested (or at least implied), the CSS should be in one file, that gets cached, and then there’s nothing to worry about. More or less, eh?
and also the js, i’m deregister css and js via functions.php but this is an hard work!
but to survive to the IE float/margin bug using the breadcrumbs from your (amazing) WordPress SEO plugin, there’s no other option that using a “display: inline”… isn’t it?
even using an inline style yoast breadcrumbs just go crazy in IE… :-(
jesus.
That has more to do with your theme than with the plugin. There are literally tens of thousands of people using it without any inline styles without any issue whatsoever.
Display:inline and inline css is different things ;)
This article recommend us to load external css files rather than put inline css code directly in the html/template files.
Good call. I spend a lot of my time battling plugins that sloppily add and abuse inline styles. Wake up plugin/theme developers.
Allowing user to use their own style a good thing. But it’s quite difficult for them those who don’t know CSS.
I just came here as a front end developer myself to applaud this best practise. Thanks.
Would be nice if WordPress had a mechanism for plugin developers to add small bits and pieces to a virtual plugin-styles.css file.
Like add_css($my_css) and maybe that function can also accept other parameters, which allow for specifying posts and pages where the CSS should be added (or maybe not, for better caching)…just some thoughts…
I just remove the plugin if it would do this if I don’t really need it. However if its a must have plugin I need for my site to work I’ll accept it.
I would prefer in some cases a system WYSIWYG, than to enter CSS code, which is not always so easy. I now try to add some code, I hope everything goes well.