Steps to remove System CSS and JS files in Drupal 7

When developing a Drupal 7 theme, some of the CSS and JS files will get automatically included. In this article, we are going to discuss about How to remove the System CSS and JS files from the Drupal 7 themes. We can achive this by using Drupal hook system. The hook system allows the developer to apply global controls and functionality without hacking theme files with PHP.

Zen theme is a best theme to start create a new Drupal 7 theme. In Zen theme certain system or module CSS and JavaScript files will creep into the theme as you develop the website. This makes it difficult to fully optimize a website as you end up serving requests for files that are often unused for displaying content to a visitor.

To remove these unwanted system CSS and JS files, add the below hook codes to your theme's template.php file:

To remove the system CSS files, use the below code.

function THEME_NAME_css_alter(&$css)
{
    unset($css[drupal_get_path('module', 'system').'/system.theme.css']);
    unset($css[drupal_get_path('module','system').'/system.base.css']);
    unset($css[drupal_get_path('module', 'system').'/system.messages.css']);
    unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    unset($css[drupal_get_path('module', 'field').'/theme/field.css']);
    unset($css[drupal_get_path('module', 'mollom').'/mollom.css']);
    unset($css[drupal_get_path('module', 'node').'/node.css']);
    unset($css[drupal_get_path('module', 'search').'/search.css']);
    unset($css[drupal_get_path('module', 'user').'/user.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'panels').'/css/panels.css']);
}

To remove the system JS files, use the below code.

function THEME_NAME_js_alter(&$js)
{
    unset($js[drupal_get_path('module', 'panels').'/js/panels.js']);
    unset($js[drupal_get_path('module', 'views').'/js/views.js']);
    unset($js[drupal_get_path('module', 'views').'/js/ajax_view.js']);
    unset($js[drupal_get_path('module', 'views').'/js/base.js']);
}

By using the above drupal hooks code, we can remove the unwanted system CSS and JS files.