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

[Metzler, David]

If it were me I'd develop my own custom logic to set a variable about
which css files should be inlcuded using the template variables hook,
and then connditionally include the css files in the page.tpl file.
Short of building acustom module, this seems like the easiest approach. 

Dave

-----Original Message-----
From: support-bounces at drupal.org [mailto:support-bounces at drupal.org] On
Behalf Of Unai Rodriguez
Sent: Tuesday, November 03, 2009 11:55 PM
To: Support
Subject: [support] How to include CSS files selectively in a smart way


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


--
[ Drupal support list | http://lists.drupal.org/ ]