By harrvester on

My site imports many CSS files. I want to create a new theme. Are all of those CSS necessary ?
For example I don't want to incorporate any Search function in my design.
Can I delete: @import url("http://localhost/drupal/modules/search/search.css?lz5gsp"); ?
How ?
Also.. how can all the CSS files be merged in one single file ? Is there any module that can merge only specific CSS files ?
I now that CSS can be added to page with href and not with @import. How can I do something like :

  <link type="text/css" rel="stylesheet" href="all_design_from_drupal.css" />
  <link type="text/css" rel="stylesheet" href="all_my_custom_design.css" />

Any recommendation on how to load the CSS files and keep the code clean ?

⋅ Categories: Drupal 7.x

Comments

findmashmind’s picture

findmashmind commented

All CSS files load through the .info file. You can comment unnecessary CSS files there. 

stylesheets[all][] = css/style.css

Add semicolon before those will not load .
;stylesheets[all][] = css/style.css
And also you can add specific CSS files inside the .module file .

 drupal_add_css(drupal_get_path('module', 'module_name') .'/css/style.css', 'module');

drupal_add_css() can be used inside the template file as well.

findmashmind’s picture

findmashmind commented

Drupal loads CSS files through the .info file. You can add CSS files following way.
stylesheets[all][] = css/style.css

You can comment unnessary CSS files this way. Use semicolon.
;stylesheets[all][] = css/style.css

And also you can load CSS files through your .module file. This will load only for module.
drupal_add_css(drupal_get_path('module', 'module_name') .'/css/style.css', 'module');

drupal_add_css() can be used inside the template file as well.

harrvester’s picture

harrvester commented

I don't use drupal_add_css().
I only load one css file in .info and still I have something like this:

  <style type="text/css" media="all">@import url("http://localhost/drupal/modules/system/system.base.css?lz5gsp");
@import url("http://localhost/drupal/modules/system/system.menus.css?lz5gsp");
@import url("http://localhost/drupal/modules/system/system.messages.css?lz5gsp");
@import url("http://localhost/drupal/modules/system/system.theme.css?lz5gsp");</style>
<style type="text/css" media="all">@import url("http://localhost/drupal/misc/ui/jquery.ui.core.css?lz5gsp");
@import url("http://localhost/drupal/misc/ui/jquery.ui.theme.css?lz5gsp");
@import url("http://localhost/drupal/modules/overlay/overlay-parent.css?lz5gsp");
@import url("http://localhost/drupal/modules/contextual/contextual.css?lz5gsp");</style>
<style type="text/css" media="all">@import url("http://localhost/drupal/modules/comment/comment.css?lz5gsp");
@import url("http://localhost/drupal/modules/field/theme/field.css?lz5gsp");
@import url("http://localhost/drupal/modules/node/node.css?lz5gsp");
@import url("http://localhost/drupal/modules/search/search.css?lz5gsp");
@import url("http://localhost/drupal/modules/user/user.css?lz5gsp");
@import url("http://localhost/drupal/sites/all/modules/views/css/views.css?lz5gsp");</style>
<style type="text/css" media="all">@import url("http://localhost/drupal/sites/all/modules/ctools/css/ctools.css?lz5gsp");
@import url("http://localhost/drupal/sites/all/modules/panels/css/panels.css?lz5gsp");</style>

<style type="text/css" media="all">
<!--/*--><![CDATA[/*><!--*/
.nivoSlider{width:1188px;height:425px;}
/*]]>*/-->
</style>

<style type="text/css" media="all">@import url("http://localhost/drupal/sites/all/modules/nivo_slider/css/nivo_slider.css?lz5gsp");
@import url("http://localhost/drupal/sites/all/libraries/nivo-slider/nivo-slider.css?lz5gsp");
@import url("http://localhost/drupal/sites/all/libraries/nivo-slider/themes/default/default.css?lz5gsp");
@import url("http://localhost/drupal/modules/shortcut/shortcut.css?lz5gsp");
@import url("http://localhost/drupal/modules/toolbar/toolbar.css?lz5gsp");</style>
<style type="text/css" media="all">@import url("http://localhost/drupal/sites/all/themes/ceva/css/style.css?lz5gsp");</style>
darrylmabini’s picture

darrylmabini commented

Hi Sir,

Can I delete: @import url("http://localhost/drupal/modules/search/search.css?lz5gsp"); ?
- Yes, you can use: hook_css_alter(&$css), and unset the css file you want to exclude.

how can all the CSS files be merged in one single file ?
- Go to Configuration > Performance, then below in Bandwidth optimization check Aggregate and compress CSS files.

harrvester’s picture

harrvester commented

thanks !

With Aggregate and compress CSS files my code reduced to:

<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_BAscabZXp0IpyhOONyobqTLqRNd4MzJOd_CGqz37kEQ.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_TsVRTbLFUpEZAfw-_bWPJu840QT523CPjUVJ5MRWfyk.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_fhQj22tjHcJBT7u8POV9YbgAbuO30ASg0SAVyQ9B5zA.css" media="all" />
<style type="text/css" media="all">
<!--/*--><![CDATA[/*><!--*/
.nivoSlider{width:1188px;height:425px;}

/*]]>*/-->
</style>
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_---6N56_wRg9zuzDb7c-i7Face68oYC3Awv5CoeZQcU.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost/drupal/sites/default/files/css/css_j7h3mS7WyhHOLpRx4-nfUBITNnVye6ux7WZrrSfD7tw.css" media="all" />

But.. is it possible to go farther? Is it possible to have 1 CSS file ? Can I drop CDATA ? And.. except the nice, good looking code, is it worth to do any more optimization ?

Gulivert’s picture

Gulivert commented

Hi harrvester
Im trying to compress all my CSS in only one file. Finally you find the way to do it?
Thanks!!!