Adding Module Stylesheets using drupal_add_css()

A couple days ago, when building a quick site with limited functionality (basically a pretty front end to a database website), I ran into a hiccup with my custom module/theme for the site, which caused me to scratch my head for a few minutes.

In my custom module (called 'idcards'), I added a stylesheet for a couple forms on the site using the drupal_add_css() function:

/**
 * Implementation of drupal_add_css()
 */
drupal_add_css(drupal_get_path('module', 'idcards') .'/idcards.css');

Later on in the development, I added a custom theme (based off a Zen subtheme I use for many smaller sites), and in that custom theme's .info file, I added a stylesheet named idcards.css.

When I cleared all the caches, I noticed the custom form styling (added by the module's idcards.css file) was missing, and on further investigation, I found that the module's idcards.css file was not being added to the pages!

Luckily for me, this is a small site, so I pretty quickly intuited that it was probably a namespace collision of some sort, and I renamed the module's file to idcards-forms.css. This fixed the issue for me, and now both stylesheets are happily living together. But just throught I'd share this tip in case anyone else encounters this problem: Make sure each one of your site's stylesheets (whether added by a module, your template.php file, or your theme's .info file) has a distinct name.

Further reading

drupal
design
css
modules
stylesheets

Comments

Please file a bugreport. I cannot imagine this was intentional.

Another thing to watch out for when adding style sheets with drupal_add_css() is the style sheet limit for IE sites. See Microsoft support.

If you don't compress your CSS in Admin > Site Configuration > Performace, any site that has over 30 style sheets will experience some unexpected styling problems...

@bwho - quite true! I've hit that problem a few times... but I always develop in Safari, then FireFox, and test last in IE, so I rarely encounter this problem until late in the dev cycle, when I usually turn on caching anyways.

http://api.drupal.org/api/function/drupal_add_css/6

Modules should always prefix the names of their CSS files with the module name, for example: system-menus.css rather than simply menus.css. Themes can override module-supplied CSS files based on their filenames, and this prefixing helps prevent confusing name collisions for theme developers.

 @Pasqualle - ah... good to know - maybe I should look up those kind of things before blindly using drupal functions?