I’ve had a few comments recently from people using one of my plugins but having difficulties with the CSS. This is not so surprising because of the great variety of themes out there; however, it occurs to me that a set of standards for theme CSS might be useful for both themers and plugin authors.
If you take a look at the source code of of some blogs you may see five to ten entries for external CSS files, plus several style tags in the header itself, all of which will effect and potentially override each other.
The base CSS in the theme itself can render any one of those effectively inoperable depending on whether it uses ID attributes or classes, and how deeply it specifies the content.
There’s a nice, quick and easy, primer on CSS Specifity at HTML Dog and a slightly longer and more in depth piece at on specifity Smashing Magazine.
All this really means is that you can have two identical themes but, because of the CSS used, a plugin will work well on one, and work poorly on another, and the variety of themes means that it can be impossible to compensate for all of them successfully.
One possible solution to this is to try and set some standards; not an easy task, I know.
Take the standard layout, #header, #sidebar, #footer, #content. All using ID tags. They are an efficient way to go when building a theme but if you style #sidebar ul li ul li, you need to be at least that specific to override it. Knowing that it is how Kubrick does it means you probably style exactly that in the plugin in the hope that others copy it.
Now take that same plugin an put it in a different container, for example, #sidebar2 ul li ul li. The plugin probably won’t work now because the best you can do to in a plugin is be generic about the container (e.g. div ul li il li / ul.plugin li ul li) because you have no way to know what it will be called.
This isn’t a simple matter. To design CSS deliberately to avoid conflict and allow extension takes some thinking about.
What I want to know is how often has you installed a plugin and found that the CSS doesn’t work as expected? If you build themes do you already try and build it with this in mind? if you think there should be standards then what should those standards be? what is the best way to avoid conflicts? and finally do you think it is it even possible to set standards for something like this? Let me know.