Advantage of loading external Page Specific CSS and JavaScript

Advantage of loading external “Page Specific CSS and JavaScript”.

Inline, embedding and External.

Inline styling is the most basic type of styling elements in a page. It’s direct and straightforward.  Though they provide the highest priority in the cascade, they pose a huge problem with  manageability of the codes and they are only specific to the element they are found. While embedding resolves the problem of redundancy in declaration of style, embedding styles on a page still lack the solution of overall code manageability.

Ex:

1.Inline Styling

<p style=”color:#33669;font-size:11px;margin:5px;”  class=”larger”>
  Hello World
</p>
<p style=”color:#33669;font-size:10px;margin:5px;”  class=”smaller”>
  Hello World
</p>

2. Embedding on a page

<style type=”text/css”>
  p{color:#336699;margin:5px;}
  p.larger{ font-size:11px;}
  p.smaller{font-size:10px;}
</style>

You can see that using inline styles above, the color and margin declaration has been repeated for both paragraph element. The example on embedding it on page resolves the problem of redundancy. The first line declares that all paragraphs should have color #336699 in hex and a margin of 5 pixels. Then the next two declarations are specific to each paragraph for font sizes. It saves you time and file size of your pages.

3. External CSS.

Instead of writing the  CSS declaration on a page, external styling is done by linking an existing and separate CSS file. This file should contain all the CSS declarations.  Its purpose is to totally separate any CSS declaration out of the page and that these CSS declarations can be reusable by any page throughout the whole website. This technique is SEO (Search Engine Optimization) friendly too as the spiders (robots that index pages) from Google,Yahoo or MSN don’t have to read all the embedded styles on your pages. They would spend more time reading the relevant content of your page and not parse through all the other stuff they don’t really need to index.

Ex:

<link href="style.css" type="text/css" rel="stylesheet" />

This piece of code tells the browser to load a file or a document. This document is a stylesheet (rel=”stylesheet”>) and for browser to interpret the stylesheet properly browser should know the MIME type of the loaded document (type=”text/css”).

We can see that external styling should be our best choice specially for websites with pages from 3 or more. But wait there is more (as they say it in T.V). External styling has its own disadvantage too. Having one external stylesheet for a whole lot of pages means large filesize and unused declarations. Sometimes one whole external stylesheet reaches up to 500KB in size. It is because all pages is sharing one file.

Ex: Lets say the External Style sheet is 500KB in size.

Page A uses 5% of common external stylesheet 95% is unused. 25KB in used, 475KB unused.  475KB is downloaded on the server without purpose. Bad in terms of optimization.

There are ways to solve this problem. The goal should be to load only declarations which are relevant to the current page. Hence the title of this article, “loading external page specific CSS and Javascript”  (as this idea applies to external javascripts too).  Segregating css declarations per page is the main goal here.
What I do is, if I have 5 pages named Page A to Page E, I would create stylesheet files named pagea.css to pagee.css. To avoid confusion, I use the filename of the page itself but with the CSS extension.

Using CSS @import rule.

<style type="text/css"&gt@import url(‘pagea.css’);</style>

Of course when you are in PageB you should load pageb.css and so forth.

Using @import rule comes with limitations. Old browsers do not recognize them like NN4 (Netscape Navigator 4) and you have to do something before it will work in IE4 (Internet Explorer 4).Not to mention all other problems when old browsers see read this code. But I don’t think people still use these old browsers anymore. Who knows :p

Using server side programming language like ASP,ASP.NET/C# or PHP, etc.

I have created a php file which contain the code to load external CSS and javascript files.

<?php
    $page=$_GET["page"];
    $type=$_GET['type'];
    $contenttype=$type=='js'?'text/javascript':'text/css';
    $filepath=$type=='js'?'script/'.$page.'.js':'css/'.$page.'.css';

    header('Content-type: '.$contenttype);
    //header('Cache-control: must-revalidate');
    //header('Expires: '.gmdate('D, d M Y H:i:s',time()+10800).' GMT');

     if(file_exists($filepath)){include($filepath);}else{die();}
?>

To use this file, you have to supply to information. The file type and the page name. This can be done automatically though. But I thought it’s good to do it like this for learning purposes.

Ex:

<link href="external.php?type=css&page=pagea"
  rel="stylesheet" type="text/css" />

Those two commented lines if for caching the output . You can uncomment them if you want. Of course this will only work if you actually have the file pagea.css (referring to the call above). This file only loads the CSS files that you specify on the page querystring (&page=pagea).

Conclusion:

I think this is an improved idea of external styling since today we have a large amount of resources that we can utilize. Improved server side languages, new ideas introduced on them and many more. It helps us achieve small goals in programming. Relative to this topic we are able to achieve our goal of loading “only” the css files that we need and “not” put them in one huge and bloated CSS file. The code above can be modified to automatically detect the name of the current page so you don’t need to pass the information every time when calling it. This code can also be translated to ASP or C#. Depends on which server side language you are using.