Why CSS Should Be Loaded Before JS

Last week I’ve spent countless hours debugging a problem with a piece of Javascript code. The solution was ridiculously simple, but to my big surprise I couldn’t find any sources on the internet documenting it: load your CSS files before your JS files. Let’s discuss some details.

It looks better

During the loading of your website, what would you rather see:

  1. white screen > unstyled website > styled website > interaction > styled and interactive website
  2. white screen > unstyled website > interaction > styled website > styled and interactive website

I honestly can’t imagine anyone choosing B. This would mean that visitors using slow internet connections will be faced with an unstyled website, that allows them to interact with it using Javascript (since that is already loaded). Furthermore, the amount of time spend looking at an unstyled website would be maximized this way. Why would anyone want that?

It works better

The jQuery reference states that: “When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts“. Even though I can’t find any direct notion of it in the MooTools docs, they are clearly loading CSS files before JS files on their demo site.

When the files are loaded in the wrong order (first JS, then CSS), any Javascript code relying on properties set in CSS files (for example the width or height of a div) won’t be loaded correctly. It seems that with the wrong loading order, the correct properties are ‘sometimes’ known to Javascript (perhaps this is caused by a race condition?). This effect seems bigger or smaller depending on the browser used.

Joomla 1.5 and 1.6 specific solutions

None of the Joomla templates packaged with Joomla 1.5 and not even the templates to be released with Joomla 1.6 (Atomic, Beez5, Beez2 and Milkyway) have a correct loading order for JS and CSS files. Refer to the version of Joomla you are currently using to learn how to use the correct loading order for CSS and JS files (remember that Joomla 1.6 is still in beta phase at this moment and things might change before the final release):

Joomla 1.5

PHP

<?php
// No direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

// Load the MooTools library
JHTML::_('behavior.mootools');

// Get the document object
$document = &JFactory::getDocument();

// First add CSS to the document
$document->addStyleSheet('templates/system/css/system.css');

// Then add JS to the document
$document->addScript('templates/' . $this->template . '/js/jquery-1.4.4.min.js');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>

Output (stripped for clarity of the JS/CSS order)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"> 
 <head>
  <link rel="stylesheet" href="/joomla/templates/system/css/system.css" type="text/css" />
  <script type="text/javascript" src="/joomla/templates/beez/js/jquery-1.4.4.min.js"></script> 
 </head>

Interestingly enough, the actual order in which $document->addStyleSheet() and $document->addScript() appear in the code isn’t relevant. As long as you use these functions to add your scripts and stylesheets to your header, Joomla will take care of the rest. More information on adding stylesheets and adding scripts can be found in the Joomla docs.

Joomla 1.6

PHP

<?php
defined('_JEXEC') or die;

/* The following line loads the MooTools JavaScript Library */
JHTML::_('behavior.mootools');

/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();

/* Get the document object */
$document = JFactory::getDocument();

/* First add CSS to the document */
$document->addStyleSheet('templates/system/css/system.css');

/* Then add JS to the document */
$document->addScript('templates/' . $this->template . '/js/jquery-1.4.4.min.js');
?>

<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
 <head>
 <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
 <jdoc:include type="head" />
 </head>

Output (stripped for clarity of the JS/CSS order)

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" > 
 <head> 
  <link rel="stylesheet" href="/joomla/templates/system/css/system.css" type="text/css" /> 
  <script type="text/javascript" src="/joomla/templates/beez/js/jquery-1.4.4.min.js"></script> 
 </head>

Like Joomla 1.5, the actual order in which you add the scripts and stylesheets to your document in Joomla 1.6 doesn’t affect the output. Joomla 1.6 correctly outputs CSS files before JS files when they are added with the proper methods to the document.

Comments are currently closed.