[support] How to include CSS files selectively in a smart way

Scott scott at bscottholmes.com
Wed Nov 4 20:34:04 UTC 2009


This is what I'm currently doing in template.php:

function [themename]_preprocess_node(&$vars, $hook) {
  if ($vars['type'] == 'adcoupon') { // Node type is 'adcoupon'
drupal_add_css(drupal_get_path('theme','[themename]').'/adcoupon.css','theme');
}

In this case the node type (adcoupon) is actually a cck type.  I have
the specific css file in the theme directory.



On Wed, 2009-11-04 at 00:55 -0700, Unai Rodriguez wrote:
> Dear All,
> 
> We are currently developing a somewhat complex community site using Drupal
> 6. Since we are still within "Drupal's learning curve" we are going through
> some code re-architecture right now.
> 
> When it comes to CSS files, we are trying to apply as much as possible the
> following rule: "every page has 2 CSS files: one general that applies to
> every page and one specific for each page or group of pages". That is
> similar to what is explained and illustrated here:
> 
> http://css-tricks.com/unique-pages-unique-css-files/
> 
> We have already divided conceptually all our site pages into different
> parts; each of these parts will be styled through one general plus one
> specific CSS file as much as possible. That seems to make sense so far...
> 
> The issue we are facing right now is... HOW DO WE INCLUDE DIFFERENT CSS
> FILES INTO DIFFERENT PAGES?
> 
> 1) Our current approach
> 
> Using different template files (i.e. page-xxx.tpl.php). I do not think
> this is good because:
> 
> - We have 28 template files at the moment. Every time we make a small
> change on the HEADER, FOOTER or any common part across the whole site... we
> need to modify *a lot* of files to accommodate that change.
> - The way we are including files is using a direct link (i.e. adding lines
> like that to the template file: <link  type="text/css" rel="stylesheet"
> media="all" href="<?php echo $theme_path.'/myhomebox.css'?>">). I think
> this is not good either BECAUSE Drupal's CSS OPTIMIZER will not include
> this files on its queue. So these files cannot be optimized with the
> built-in mechanism...
> 
> 2) How about CSS INJECTOR?
> 
> We are right now exploring on CSS INJECTOR
> (http://drupal.org/project/css_injector) module. The module is pretty cool,
> allows you to "inject" (:-p) CSS files on pages following rules. The
> "basic" rules are URL based. Unfortunately that is not enough for us
> BECAUSE we have pages with similar URL that render different content.
> Example: /node/$nid. So we could then use CSS INJECTOR's *expert* mode
> where you can write your own PHP to decide if the CSS file gets in. But I
> wonder... How about the overhead of this? I mean, surely we can see what
> can of node is any given node_id... but that means we need to load the node
> again on the injector level then again for rendering the page?
> 
> For now we have decided to include our GENERAL MAIN CSS FILE that applies
> to *every* page using CSS INJECTOR. Then we do not know how to smartly
> include our specific CSS file depending on what page.
> 
> I am kind of inclined of trying to get less page-xxxx.tpl.php files and do
> some sort of conditional checking on them. But there might be other better
> methods out there.
> 
> Also, we could try to group styles based on URL then embrace CSS INJECTOR
> as our css including brain :-P so every page that is /node/* will have
> node.css files included. This seems a bit awkward from a developer
> standpoint because it can be that apples and pears both have the same
> /node/$apple_id and /node/$pear_id url thus using the same CSS file.
> 
> The email is getting a bit long. I think the discussion can be
> interesting.
> 
> ANYONE KNOWS ANY GOOD APPROACH TO GET THIS GOING? ANY THOUGHTS?
> 
> Thank you so much,
> unai
> 
> 




More information about the support mailing list