Scratching the surface of “Why CSS?”
May 30th, 2007 : Nik RowellThere’s nothing quite like a well planned, well executed CSS (Cascading Style Sheets) layout. Along with being more exciting to implement than nested table layouts, they offer several advantages. This post only scratches the surface, but hopefully it answers some “why CSS?” questions. In a CSS-layout, the resulting source code is stripped down of extraneous markup. Rather than:
<table border=”0″ cellpadding=”0″ width=”760″>
<tr>
<td width=”150″ colspan=”3″ class=”bodyTxt”>
…you can trim things down to something like:
<div id=”mainTable”>
…Ah, much better. This offers 3 main benefits (and probably more… feel free to comment). It consolidates styles and formatting, making many site-wide changes as simple as 1 line of code (I won’t even start about the horrors of font tags). Another benefit is that it makes implementing server-side scripts (PHP, ColdFusion, etc) a lot cleaner. When integrating multiple loops and outputting data in a page, it’s a lot nicer to deal with a few <div>s and <p>s than tables, table rows, table cells etc etc. And it’s good practice to keep your programmers happy. Finally, having stripped out all markup, all that’s left is structure and content. Which means more weight is given to those keywords your in-house Search Engine Optimization expert sprinkled into the copywriting.
One last note - all of these benefits assume that an external style sheet is used. While there’s a time and a place for both, the more internal and in-line styles used, the less effective and beneficial the CSS is overall. Ideally, a page should be split into 3 “layers” - a structure layer (html), a presentation layer (CSS) and a behavior layer (JavaScript)… but that’s for another post…
May 30th, 2007 at 11:55 pm
I agree wholeheartedly. I can only add three more things to the laundry list of reasons that CSS rocks - web pages written with a CSS layer are easier to make accessible for vision impaired users, content that goes into a structure with no presentation data is easier to abstract for the purposes of localization, and most browsers are smart about caching CSS files, which results in faster loading for pages that share a common stylesheet.
March 13th, 2008 at 8:31 am
… This is far from complete. In fact, looking back on this post, I realize I’ve left off some major points. Specifically, the attention to accessibility and potential for absolute control over layout. I think the the CSS Zen Garden puts it a lot better than words can.