March 17, 2014 07:24 AM

Drupal 7 CSS system

Drupal 7 gives developers the chance to add CSS files in module development via drupal_add_css funciton. This functionaliy has led almost every module to add an additional file, leaving the common Drupal configuration with multiple css instances:

• node.css
• comment.css
• system.css
• system-menus.css
• etc

While it looks like this could led into a peformance problem (multiple HTTP request), it is not thanks to Drupal 7 CSS Agregation option(it can be enabled in admin/config/development/performance) which aggreates all the modules added by modules into a unique CSS file and just one HTTP request, indispensable in production enviroments.

In most situacion, creating a Drupal 7 theme we find out that we couldn't start over just with a CSS reset  because there are lots of additional CSS statements in files added by modules.

Disabling modules CSS in Drupal 7, the wrong way

It very common (see link), and in fact it is used by base themes like Versatile (see file), to redeclare in our Drupal theme .info file the specific module CSS file in order to disable it:

stylesheets[all][] = node.css
stylesheets[all][] = date.css

This is the wrong way because it does not work with AJAX request, and those statement that we thought were disabledcome back again (see video) It is an issue that is not currently fixed.

The solution

Till then there is an alternative and functional way to get this done, we have to implement in our template.php the hook hook_css_alter and unset all the CSS files we want to disable:

function custom_theme_css_alter(&$css) {
  // Solution till http://drupal.org/node/967166 is fixed
  unset($css[drupal_get_path('module', 'node') . '/node.css']);
  unset($css[drupal_get_path('module', 'date_api') . '/date.css']);
}

JavaScript

This happens too with JavaScript files, but in that case we have to implement hook_js_alter.