Maintainable JavaScript

Chapter 5. Loose Coupling of UI Layers

In web development, the user interface (UI) is defined by three separate layers working together:

• HTML is used to define the data and semantics of the page.

• CSS is used to style the page, creating visual distinction.

• JavaScript is used to add behavior to the page, making it more interactive.

These UI layers are usually pictured as HTML being at the base, with CSS and JavaScript layers on top, as displayed in Figure 5-1.

Figure 5-1. The layers of a web user interface

In reality, though, CSS and JavaScript are more like siblings rather than JavaScript having a dependency on CSS. It’s possible to have a page with just HTML and CSS without any JavaScript, and it’s possible to have a page with just HTML and JavaScript without any CSS. I prefer to think of the relationship between these three layers as displayed in Figure 5-2.

Figure 5-2. The updated layers of a web user interface

Thinking of CSS and JavaScript being of the same stature in an overall web user interface allows for more possibilities and eliminates dependencies. For example, JavaScript shouldn’t rely on CSS to function correctly—it should be able to function independently of the CSS, even if there is some interaction between the two.

Each layer of a web UI is a piece of a larger system that must ...