Refactoring - Refactoring HTML: Improving the Design of Existing Web Applications - page 19

the cost of refactoring to XHTML.
Why CSS
The separation of presentation from content is one of the fundamental design principles of HTML. Separating
presentation from content allows you to serve the same text to different clients and let them decide how to
format it in the way that best suits their needs. A cell phone browser doesn't have the same capabilities as a
desktop browser such as Firefox. Indeed, a browser may not display content visually at all. For instance, it may
read the document to the user.
Consequently, the HTML should focus on what the document means rather than on what it looks like. Most
important, this style of authoring respects users' preferences. A reader can choose the fonts and colors that suit
her rather than relying on the page's default. One size does not fit all. What is easily readable by a 30-year-old
airline pilot with 20/20 vision may be illegible to an 85-year-old grandmother. A beautiful red and green design
may be incomprehensible to a color-blind user. And a carefully arranged table layout may be a confusing
mishmash of random words to a driver listening to a page on his cell phone while speeding down the Garden
State Parkway.
Thus, in HTML, you don't say that "Why CSS" a few paragraphs up should be formatted in 11-point Arial bold,
left-aligned. Instead, you say that it is an H2 header. At least you did, until Netscape came along and invented
the font tag and a dozen other new presentational elements that people immediately began to use. The W3C
responded with CSS, but the damage had been done. Web pages everywhere were created with a confusing mix
of font, frame, marquee, and other presentational elements. Semantic elements such as blockquote , table ,
img , and ul were subverted to support layout goals. To be honest, this never really worked all that well, but for
a long time it was the best we had.
That is no longer true. Today's CSS enables not just the same, but better layouts and presentations than one
can achieve using hacks such as frames, spacer GIFs, and text wrapped up inside images. The CSS layouts are
not only prettier, but they are leaner, more efficient, and more accessible. They cause pages to load faster and
display better. With some effort, they can produce pages that work better in a wide variety of browsers on
multiple platforms.
Shifting the markup out of the page and into a separate stylesheet allows us to start with a simple page that is
at least legible to all readers, even those with ten-year-old browsers. We can then apply beautiful effects to
these pages that improve the experience for users who are ready to handle them. However, no one is left out
completely. Pages degrade gracefully.
Shifting the markup out of the page also has benefits for the developers. First of all, it allows different people
with different skills to work on what they're best at. Writers can write words in a row without worrying about
how everything will be formatted. Designers can organize and reorganize a page without touching the writers'
words. Programmers can write scripts that add activity to the page without interfering with the appearance. CSS
allows everyone to do what they are best at without stepping on each other's toes.
Whereas CSS is a boon to writers and designers, it's a godsend to developers. From a programmer's
perspective, a page is much, much simpler when all the layout and style information is pulled out and extracted
into a separate CSS stylesheet. The document tree has fewer elements in it and isn't nested as deeply. This
makes it much easier to write scripts that interact with the page.
Finally, the biggest winners are the overworked webmasters who manage the entire site. Moving the markup
out of the pages and into separate stylesheets allows them to combine common styles and maintain a
consistent look and feel across the entire site. Changing the default font from Arial to Helvetica no longer
requires editing thousands of HTML documents. It can now be a one-line fix in a single stylesheet file.
CSS enables web developers, webmasters, and web designers to follow the DRY principle: Don't Repeat
Yourself. By combining common rules into single, reusable files, they make maintenance, updates, and editing
far simpler. Even the end-users benefit because they load the style rules for a site only once rather than with
every page. The smaller pages load faster and display quicker. Everyone wins.