Removing unwanted stylesheets from Drupal

By David Pratt / Tags: css, drupal / 3 Comments / Published: 16-12-09

One of the things that irritates me about adding modules in Drupal, is that they often have their own stylesheets associated with them that get automatically added to the site upon module activation. Not always, but very often you’ll find that the rules within these supporting stylesheets result in one or more of the following undesirable side-effects:

• possess rules that clash, or are made redundant by rules that you already have in place
• control aspects of the module administration that a user would never see
• cater for features that the module provides that you don’t need, or haven’t activated
• offer browser and device support that is not part of the site requirements
• you have themed a modules mark-up, thus rendering its own stylesheet obsolete

Generally there is no easy way, or no way at all to disable these stylesheets from the admin or module settings.

If you took a typical Drupal setup with a Zen starter theme and add about 10 of the popular modules, it wouldn’t be unthinkable for the number of stylesheets to breach the 20 mark! 20 stylesheets!

Even before you start adding your own stylesheets...

I know that the stylesheets can be cached and served as one file, but when you’re debugging the CSS and adding new sections to a site of any real size, you will inevitably end up playing specificity wars and having to reset rule properties more often than you’d like. This all leads to bloated CSS that is a pain to debug and maintain.

To overcome this in the past and regain some sort of control over what CSS ends up on the site, I have adopted a code butchers approach and taken to ripping out the line seen below in the page.tpl.php file, and then just manually adding the stylesheets in the html.

print $styles; //bye, bye

That’s a problem solved, but another problem created in that sometimes you do actually want a modules stylesheet to be used. Determining the CSS file location(s) that a module uses can be difficult, especially when there are configuration options within a module that force different sets of stylesheets to be used such as in the popular fivestar module.

I’m sure there are probably better, cleaner ways to achieve this, but what I do now is cull the Zen starter theme.info of all superfluous stylesheets and then add the phptemplate_preprocess_page function within the template.php file with code that removes the remaining unwanted stylesheets, like so:

function phptemplate_preprocess_page(&$vars){
	//Get the loaded stylesheets as an array
	$stylesheets = drupal_add_css();
	//Remove the default style sheets
	unset($stylesheets['all']['module'] ['modules/aggregator/aggregator.css']);
	unset($stylesheets['all']['module'] ['modules/node/node.css']);
	unset($stylesheets['all']['module'] ['modules/system/defaults.css']);
	unset($stylesheets['all']['module'] ['modules/system/system.css']);
	unset($stylesheets['all']['module'] ['modules/system/system-menus.css']);
	unset($stylesheets['all']['module'] ['modules/taxonomy/taxonomy.css']);
	unset($stylesheets['all']['module'] ['modules/user/user.css']);
	//Remove some of the popular module stylesheets - add / remove your own here
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/modules/fieldgroup/fieldgroup.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/theme/content-module.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/date/date.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/filefield/filefield.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/link/link.css']);
	//Set the styles
	$vars['styles'] = drupal_get_css($stylesheets);
}

This function will do the trick for all of the Drupal system stylesheets and a few of the popular modules. There is a big drawback to all this stylesheet optimisation of course, which is you’ll notice that your admin area falls apart and becomes completely unusable due to the fact that the supporting stylesheets aren’t present. To overcome this is simple in most cases – you just need to set your administration theme (Administer -> Site Configuration -> Administration theme) to use a different theme and all module stylesheets will be pulled in – I usually go for the comforting shades of Garland.