QA: The three layers in web design

The best practice in web development, with no discussion, is the three layers. However, much of the people who work in web environments don't know this practice or disclaim it again and again. They are normally the people who works with Java and .NET technologies and use frameworks or libraries that encapsulate for them the "complexity" of the front-end like Seam or Controls libraries.

This approach, in my experience, is the cause of a lot of problems in performance, accesibility, standardization and breach of international rules like W3C recommendations, WCAG, and much more.

What "The three layers" is

The three layers is an approach of web architecture that force us to decouple our Javascript, CSS and HTML by the function they must have.

This implies that much of the properties, tags and characteristics of these languages should not be used to avoid a bad use of these technologies or the coupling of the layers.

HTML is used to structure the data and give them a semantic meaning, CSS sets the appeareance of the data (colors, fonts, alignment, ...) and, finally, Javascript adds the behavior (linking, animations, change of view and so on).

Also, this approach includes another concept that is called unobtrusive technologies, specifically unobtrusive Javascript and unobtrusive CSS (we talk about that in the next sections).

HTML

The HTML markup gives the semantic meaning of the info we shows in the website. It's only the structure of the info and should not include any info about the behavior or the appearance of this info.

This means that attributes like border, background or similars like these can't be used. You have to use CSS to add any info about the appearance of the HTML.

Also, you must study the correct use of the Tags to give a correct semantic info about your content. The use of the lists, paragraphs and so on seems easier than really is and the HTML5 new tags like nav, section or article add new rules to it.

CSS

With CSS, we should add the whole info about the appearance of the app/website. Things like colours, borders, sizes or positions are defined with classes of CSS.

It depends we consider the animation is part of the appearance of behavior we can include animations with CSS animations in this layer or send to the behavior layer in Javascript.

It's important to maintain the decoupling that the CSS be included in an unobtrusive mode. This implies place all CSS in external files. No inline CSS is permitted with the HTML style attribute nor the style tags. This includes the set of these tags and attributes via javascript.

Javascript

With Javascript, we should add behavior to our HTML tags. It includes events like onclic, complex actions like resize pictures and so on.

As with CSS, we have to include our scripts in an unobtrusive mode so we only add scripts in external files rather than inline event attributes like typical onclic attributes or script tags, for example, to add the script of Google Analytics.

Don't use Javascript to modify directly the appearence of any tag, only change the class and lets CSS do its job.

Advantages

Using the three layers approach, we get a decoupled code that improves drastically not only maintenance tasks but also unforeseen changes during the development process, changes in the future livecycle of the application or website, scalability and much, much more.