Remove stylesheet selectively in Drupal for page

Question

I am trying to make different layout for the front page. In that process I declared new stylesheet called "front-page.css" and page--front.tpl.php. I am using a Zen subtheme which loads responsive-sidebar.css. I want to remove "responsive-sidebar.css" and load "front-page.css". The reason I am doing it because the number of grind columns in the later stylesheet is different that former.

I don't want to use Panels module. I am using Drupal 7.

Answer 1

I just found better way to do this. It is bit hacky, but allows to unset css at almost any place:

$css = &drupal_static('drupal_add_css', array());
unset($css['some_css_path']);

Answer 2

The Drupal 7 way is to use hook_css_alter():

function MYMODULE_css_alter(&$css) {
  // Remove defaults.css file. The path will probably change for your theme obviously.
  unset($css[drupal_get_path('theme', 'MYTHEME') . '/css/responsive-sidebar.css']);
}

That hook can be implemented in either a module or a theme.

Answer 3

Inside your theme's template.php file and inside the template_preprocess_page($vars), find the CSS file you want to remove inside $vars['stylesheets'] and use PHP's unset function to remove it from the $vars['stylesheets'] array.