Tech Support: Isolate CSS and Javascript

Last month we discussed the separation of content, design and functionality when it comes to developing a website. We introduced the idea that HTML documents should contain primarily content, with as little markup code as possible. The reason for this is that any extra code dilutes the content to the search engines. So, let’s look at ways to apply CSS formatting and JavaScript functionality with as little HTML code as possible.

Two options for Cascading Style Sheets

There are a couple different options to apply CSS styles, and some are better than others. In order to declare styles in an unobtrusive manner, we want to link our HTML page to an external style sheet. This external text file contains all of our CSS style declarations, and can be linked to any HTML document to which we want to apply styles. Essentially we then have all of the flexibility of CSS with only a minimum of extra code added to our HTML document.

Adding JavaScript functionality to a website can be done in a variety of ways, most of which require additional HTML code. The most common way is to declare JavaScript functions in the head section of a HTML document, and include calls to those functions in the document as needed. Just like with CSS, this means there is extra code at the top of our HTML document, and these functions will only be available for the document that they are declared on.

The alternative is to include all JavaScript code in an external file. Once again, this file can be linked to any HTML document, so multiple pages can use the scripts. While it may take a little getting used to, all the same functions and event handlers can be assigned from an external file, just the same as they would be from the HTML document.

Removing all visual formatting and functionality code to external files allows us to optimize our HTML document. Not only have we optimized our code, but also we have also inadvertently organized our web development. Using this method, we know to look at our HTML files for content-related code, our CSS file for visual-formatting code and our JavaScript file for functional code.

Brian Getting
Brian Getting
Bio   •   RSS Feed