Adding custom JS and CSS to a page is easy in Drupal, but can be a little bit messy when you need to choose what approach to use.

There are 7(wow!) ways of including and managing CSS/JS inside your theme/module. Let’s take a look at all of them provided by one of FFW Drupal developers.

1. drupal_add_css(), drupal_add_js()

This is the most common method used by most developers.

Advantages

• Easy to use, can be inserted wherever you want;
• Can inset inline css/js;
• Easy to find documentation;
• Added files are cached;
• Supports conditions (browser, media etc.).

Disadvantages

• Can be found anywhere in the code where you’re not expecting it;
• Including multiple files is messy;
• If css/js file name changed you have to replace the name everywhere in the code.

2. including in .info file

Advantages

• Quickly understand what files are used in module/theme;
• Allows better aggregation;
• Will be used on every page without having to insert in preprocess(etc.) functions;
• Standard technique for themes;

Disadvantages

• Unused css/js could be included where you don’t need it;
• Almost no control when the files will be included;
• Can’t remove or set weight to files in .info file.

3. [‘#attached’]

Advantages

• Best way to make sure you files will always be included;
• Works great with css, js and libraries;
• Can use any kind of attached data;
• Easy to include multiple files;
• Best choice for forms.

Disadvantages

• Including the cs styles/scripts will need multiple attaches;
• Depends on file path and name.

4. drupal_add_library()

Advantages

• Great when you need to reuse styles/scripts on different pages;
• Path and file names are stored in one function;
• You can take libraries to other projects;
• Easy to include multiple files;
• Libraries can use other libraries;

Disadvantages

• A bit more code to write;
• Includes all the files in libraries.

5. hook_css_alter(&$css), hook_js_alter(&$js)

Advantages

• Allows to rearrange elements by weight;
• You can delete files you don’t need before aggregation;
• Easy to replace path to file (ex.: using jQuery from CDN);
• Possible to reconfigure the aggregation;

Disadvantages

• Adding files here is possible but a bad choice;
• You can easily mess up with files here.

6. drupal_add_html_head()

Advantages

• Allows to include scripts/styles with different type;
• Can be used for js templating engines.

Disadvantages

• No aggregation;
• Hard to understand where the code is included;
• Bad practice.

7. Including as html in .tpl.php or printing it

Don't do that!

 

Hope those methods come in handy for you. Make sure to use them in dependence of conditions you meet.

We personally like to use drupal_add_library and [‘#attached’]. The form attached is really great - we describe the attached files in the beginning of the form and it’s very easy to understand what’s going on without scrolling through all the code.

If you want to find out more, leave a comment and I will share some cool links to resources that explain how to add custom JS and CSS to a page in Drupal.