Removing unwanted CSS files from a Drupal theme

If you’ve ever developed your own Drupal theme then you may have noticed that Drupal & other contrib modules provide their own stylesheets for you to contend with. Of course you could just override the CSS rules with your own, however the files are still being included on every single page load when they really don’t need to be.

Just as an example: there were around 14 additional stylesheets being provided by core or contrib modules on my contact page alone.

Luckily there are a couple of solutions for removing all this ‘gubbins’:

If you know the particular name of the CSS file you want to remove then you can specify the name in your own theme .info file. Let’s take the system.menus.css file for example, to stop this file being included you would use the following code:

stylesheets[all][] = system.menus.css

</code>

Drupal will effectively look for the file in your theme and when it can’t find it, it simply doesn’t include it. It’s a slightly counterintuitive approach because you’re essentially including a file which doesn’t exist.

There is a more brute force option in the form of the hook_css_alter function. This allows you to act on the CSS files being called & in my case unset them.

The following code can be placed in the template.php file or alternatively within a custom module (although I’d say modules should perhaps stay away from dealing with the theme of a site).

function YOUR_THEME_css_alter(&$css){

foreach($css as $key => $val){

    unset($css[$key]);


}

}

</code>

This chunk of code will remove every single css file including any provided by your theme so you’re probably going to want to put some conditional checks in there to ensure your files aren’t removed. As another little tip, if you’re dealing with the administration section of your site and don’t have a seperate administration theme then you may want to add in a check so that the files aren’t removed for these pages.

If you do remove the excess css files then of course you will need to provide your own styles for elements such as the confirmation/error messages on a contact form for example.

Another option for removing all the additional css files would be to not include the $styles variable within your html template & just provide a link to the current theme style, however I find the function above provides a little more flexibility.

It’s only a relatively small change but if you’re trying to speed up a site then I’d say every little helps! I’m probably going to do a follow up post on removing Javascript files too when I get round to tackling it - Drupal has quite a strong dependency on jQuery & tends to include it on every single page load even if it’s not being used.