A: The CSS revolution
An unobtrusive script should have all of the following traits:
- It should be usable, i.e., it should confer a definite usability benefit on the site.
- It should be separate; it resides in its own .js file instead of being scattered through the HTML.
The three layers
A Web page consists of three layers (and yes, these are the ones that need to be separated from each other):
- HTML structure.
- CSS presentation.
The HTML structural layer is the most basic part of the page. The HTML tags form the structure of the page and give meaning to its content. For instance, if a certain text is marked up with an <h1>, it’s a header and should be treated as such. Browsers (or, more generally, user agents—programs that interpret HTML) are expected to distinguish this header from the surrounding normal text, for instance by displaying it in bold and in a larger font, or by pronouncing it louder or slower. Once you’ve created structurally correct HTML, you can be reasonably certain that most user agents, hence most users, will recognize a header as a header.
The purpose of the CSS presentation layer is to define how your HTML should be presented. CSS allows you to specify colors, fonts, leading, and other typographical elements, as well as the general layout of the page, for instance, “The navigation block goes next to the content block.”
Separation of concerns
Another point raised by the division of client-side code into three layers is the separation of concerns. In general, it’s best to manage each of the three layers separately. At the most basic level, this is done by making sure of the following:
The three separations
As you see, separating concerns makes your site’s code cleaner and easier to maintain. In the next section we’ll discuss the gory details of the three separations:
- Separation of presentation and structure (CSS and HTML);