How to add stylesheets to plugin easy to overide by style.css

[Remkus]

Hi all,

I working on a plugin where I would like to add a stylesheet to, but also I'd like the main theme stylesheet to easily override any statements I put in the plugin stylesheet. I've looked everwhere but I can't find a good example. Anybody out there that wants to point me in the right direction?

[Ryan]

If you use the wp_enqueue_style() function the theme can totally remove your stylesheet if it wants (or any plugin for that matter).

If you just want to make your stylesheet easy for the theme developer to over-ride directly (without totally removing it via wp_enqueue_style()) then make sure you use as little specificity as possible (http://reference.sitepoint.com/css/specificity). That's not something that can easily be taught in a forum thread though, it's just a generic CSS best-practice to help avoid future code conflicts.

Never use !important style declarations in your plugin. That will annoy the bajeesus out of anyone who wants to override the CSS directly. Many plugins do this and it is (almost always) because the developer doesn't know much about CSS and is trying to hack something into position. Don't use !important declarations in themes either for that matter. !important should only be used as a last resort to forcedly over-ride another CSS rule or if you know that no one will ever need to over-ride that particular rule (which you can't know for a publicly released plugin or theme).

[Remkus]

If you just want to make your stylesheet easy for the theme developer to over-ride directly (without totally removing it via wp_enqueue_style()) then make sure you use as little specificity as possible (http://reference.sitepoint.com/css/specificity). That's not something that can easily be taught in a forum thread though, it's just a generic CSS best-practice to help avoid future code conflicts.

This is what I meant yes... I had thought of this, but this also implies when I would release it publicly I'm bound to get a lot of questions with all the different CSS and HTML markups out there.

I'd wish for my plugin to add a fallback CSS statement, but perhaps I should just create an option to include the plugin's stylesheet or not. Not sure.
What do you think?

Oh, and no worries about !important stuff!

[Ryan]

This is a problem I've ran into many many times with menu plugins. Users don't want to have to add stuff to their themes so I started adding a built in CSS file with the plugin, then some wanted it removed, so I added an option in the admin panel, then some wanted to be able to edit it via the admin panel, so I built a CSS editing page in the admin panel along with a checkbox to turn the CSS file on or off. This kept them happy.

However, in retrospect I would have released multiple plugins, one which included the CSS file along with the main functionality of the plugin and another which prevented the CSS file in the other plugin from loading. I wouldn't give them the option to edit the CSS in the admin panel no matter how much whining they make. If they want to modify their CSS they should do it in their theme, not via the plugin. They can always edit their themes CSS file via the admin panel anyway if they want and you could provide instructions for them on how to do that.

Unfortunately it's awkward for me to go back now and change my own plugins as I risk breaking the sites of users of the previous versions. KISS (Keep It Simple Stupid) is a lesson I learned too late unfortunately. All that extra code I added was a waste of time and a pain to maintain.

[Remkus]

In my case I think adding a plugin stylesheet, keeping specificity in the back of my mind, and a option to not load the plugin stylesheet at all is my best scenario.

Thanks for sharing Ryan, much appreciated!

[Ryan]

I'd take a wild guess that 99% of the users of the plugin will never want to deactivate the CSS, but the 1% who want to will be quite vocal about it :)

I keep meaning to write a plugin for Contact Form 7 to deactivate it all it's extraneous crap but haven't gotten around to it yet. There's a few other good plugins floating about which add some annoying stuff like unneeded CSS and JS files too but they often don't provide any way to deactivate them - very annoying.

[Remkus]

Yeah, I think that 99% is pretty accurate...

Which plugin did you wrote which you just referred to? Looking for code inspiration and can't seem to find a lot of plugins that have this feature ..

[Ryan]

PixoPoint Menu plugin. Don't look to it for inspiration for this though. It's more like a demonstration of what not to do in relation to this sort of thing.

My latest beta attempts to fix a bunch of problems like this (not the CSS issue specifically though) by splitting it up into separate plugins, but it's become a nightmare to do while still providing backwards compatibility. I've spent probably 10x as long writing the backwards compatibility as I ever did writing the original versions and the new version to replace it. To complicate things even further, the PixoPoint Menu plugin was a replacement for the Multi-level navigation plugin, so I'm trying to upgrade people from one plugin to another, while splitting the other plugin up into chunks to simplify it/make it more usable for more people ... arghh ...

[Remkus]

That sounds like a nightmare

[chipbennett]

I'd take a wild guess that 99% of the users of the plugin will never want to deactivate the CSS, but the 1% who want to will be quite vocal about it :)

I keep meaning to write a plugin for Contact Form 7 to deactivate it all it's extraneous crap but haven't gotten around to it yet. There's a few other good plugins floating about which add some annoying stuff like unneeded CSS and JS files too but they often don't provide any way to deactivate them - very annoying.

How would you control the pages on which to unenqueue styles/scripts? Would you have an options page with user-defined pagenames on which contact forms are used, or would you do a double-loop and unenqueue automatically?