Wordpress - Best way to overide plugin CSS?
As you suggest, the most elegant approach is when your CSS overrides are loaded after the CSS injected by the plugins. This is quite easy to achieve - you just need to make sure that your header.php calls wp_head() before it references your style sheet:
<head>
<!-- all the usual preamble stuff goes here -->
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
There are several ways plugins can handle CSS.
- best case: plugin queues CSS and provides option to disable it (disable it, copy CSS code to your stylesheet and be happy);
- good case: plugins hooks function that queues style (unhook function, hook your own with mods if needed);
- usual case: plugin queues CSS directly. See How to dequeue a script? (applies to styles as well). Short version - there will be dequeue function in future WP release, for now could work around with
wp_deregister_* - bad case: plugin echoes CSS among bunch of other things. Case by case...
Overall in my opinion it is better and easier to disable separate stylesheets and incorporate them in your own to minimize issues and improve performance (less files to fetch).
Another quite elegant way is to use specificity of CSS.
So if the css of the plugin says:
div.product div.images img {
......
}
you define in your css:
body div.product div.images img {
......
}
Also see the answer of Michael Rader for a similar question.