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-wideredesign 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.