Abstracting Style from Structure


Many standards advocates tout “the separation of style from structure” as the primary benefit of adopting CSS in your site’s design—and we agree, with a slight qualification. As you’ll see in the coming pages, there never is a true divorce between your markup and your style sheets. Change the structure of the former, and dozens of rules in the latter might become obsolete.

Because your markup and your CSS are quite interrelated, we prefer to think of style as abstracted from structure. Your markup primarily exists to describe your content, that’s true—however, it will always contain some level of presentational information. The degree, however, is entirely up to you. If you so choose, you could easily offload the presentational work onto the XHTML—replete with font elements, tables, and spacer GIFs.

On the other hand, our style sheet can contain rules that determine all aspects of our pages’ design: colors, typography, images, even layout. And if these rules reside in an external style sheet file to which your site’s pages are linked, you can control the visual display of n HTMLdocuments on your site—an appealing prospect not only for day-to-day site updates, but one that will pay off in spades during that next site-wide
redesign initiative. Simply by editing a few dozen lines in a centralized style sheet, you can gain unprecedented control over your markup’s presentation.

This should, we hope, make you and your marketing department very happy. Because your CSS can reside in that separate file, your users could ostensibly cache your entire site’s user interface after they visit the first page therein. This is quite a departure from the tag soup days of Web design, where users would be forced to re-download bloated markup on each page of our site: nested <table> elements, spacer GIFs, <font> elements, bgcolor declarations, and all. Now, they simply digest your site’s look-and-feel once, and then browse quickly through lightweight markup on the rest of your pages.

This should, we hope, make your users very happy.

And finally, the most obvious benefit is how very simple your markup has become. This will further positively impact your users’ bandwidth, allowing them to download your pages even more quickly. And, of course, this lighter markup will benefit your site in any search engine optimization initiatives you might undertake. If you think it’s easy for you to sift through five lines of an unordered list, just think of how much more search engine robots will love indexing the content in your now-lightweight markup.