Managing CSS and JavaScript files within a Zend Framework App

When I'm creating a large external facing website or application, one of the biggest messes I used to end up making was in my CSS and JavaScript files.

As a developer/designer (jack of all trades, master of none, if you will) I tend to stay away from some of the more common developer solutions that take care of a lot of the design overhead (e.g., jQuery UI framework, Dojo, etc). Flexibility is paramount to good design -- boxing yourself into a specific layout for every page is bound to produce a boring, forgettable website. Design is highly underrated to developers, I believe a good aesthetic sense is a skill worth maturing for anyone who develops web applications. After all, you can have the most beautiful underlying code, but if it's presentation is anything short of beautiful it completely loses its "wow" factor.

Full design control usually means large, thousand plus line CSS files that equal serious pain when it comes to maintenance or building upon. If you don't namespace your selectors carefully you'll end up paying for it down the road. And heaven forbid you apply a default HTML tag styling. So, ranting aside, how do you maintain flexibility and still keep tidy CSS and JavaScript? My solution is to keep the very same directory/file structure that is used for the application for my CSS and JavaScript. The best part is by writing a very simple view helper, it's super easy to automate the proper head link and script file inclusions.

Here's what my CSS and JavaScript view helpers look like:

File: application/views/helpers/JavascriptHelper.php

<?php 
class Zend_View_Helper_JavascriptHelper extends Zend_View_Helper_Abstract
{   
    function javascriptHelper() {
        $request = Zend_Controller_Front::getInstance()->getRequest();
        $file_uri = 'media/js/' . $request->getControllerName() . '/' . $request->getActionName() . '.js';

        if (file_exists($file_uri)) {
            $this->view->headScript()->appendFile('/' . $file_uri);
        }
    }
}

File: application/views/helpers/CssHelper.php

<?php  
class Zend_View_Helper_CssHelper extends Zend_View_Helper_Abstract 
{ 
    function cssHelper() { 
        $request = Zend_Controller_Front::getInstance()->getRequest(); 
        $file_uri = 'media/css/' . $request->getControllerName() . '/' . $request->getActionName() . '.css'; 
         
        if (file_exists($file_uri)) { 
            $this->view->headLink()->appendStylesheet('/' . $file_uri); 
        } 
         
        return $this->view->headLink(); 
         
    } 
}

With that done, add the helper to your layout in the section:

File: application/layouts/scripts/layout.phtml

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>My app title</title> 
    <? $this->headLink()->appendStylesheet('/media/css/global.css') ?> 
    <? $this->headLink()->appendStylesheet('/media/css/iefix.css','screen','lt IE 7') ?>     
    <?= $this->cssHelper() ?>    
    <? $this->headScript()->appendFile('/media/js/jquery-1.3.2.min.js') ?> 
    <? $this->headScript()->appendFile('/media/js/global.js') ?> 
     
    <? $this->javascriptHelper() ?> 
    <?= $this->headScript() ?> 
</head>

Now, anytime a controller action is invoked it will look for a javascript and css file in the same controller/action file path. In the above examples I've hard-coded the CSS and Javascript parent directories (/public/media for me) directly in to the code, but this would be pretty easy if you wanted to throw it in a config file or something instead. Otherwise just change to your preferred directory and your good to go.

The next thing I'd like to explore is automatically packing/minifying all CSS and Javascript into one file (or possibly outputting them directly to the layout in-line) and then caching the results of that to optimize bandwidth usage. If I ever have the luxury of that being a priority :) ...


Andy Baird can be found blogging about his experiences with Zend Framework on his site, Leaking Abstraction.