Why CSS?
Article ID: KB101838
The recent release of Expression Web is only one more
example of how web standards and CSS have truly come of age.
CSS has been around since 1999 (!), but with spotty,
inconsistent browser support (plus the inconvenience of
having to figure out a new language) the bulk of web
developers, including myself, ignored it or used it for
minimal font formatting and removing link underlines.
But that was then. This is now... Everywhere you look,
people are encouraging the use of CSS for formatting web
sites. The current popular browsers all support CSS (in
fact, it is is completely possible -- and not difficult --
to take any tables-based web layout and create a CSS-formatted
site that displays consistently in all the browser). The
popularity of handheld internet devices (cell phones, PDAs,
etc.) has companies taking a second look at the
accessibility of their web sites. Even Microsoft has jumped
on the web standards bandwagon with Expression Web, with
specific tools and tasks built around developing sites with
XHTML and CSS. (At PixelMill, we've been offering CSS-based
web templates since early 2005.)
But is CSS really for you? Why should you bother
to climb up the learning curve of CSS-based web development
when you are already comfortable using tables? "Everyone
else is doing it" may not be the most compelling reason, so
let me first share a little bit of my story and then give
you a few specific reasons for making the switch.
Confessions of a former tables-user
Up until two years ago, I developed pretty sophisticated
tables-based web sites, applying CSS to table cells only for
background colors and basic font formatting. I would come
across various articles about CSS positioning and layout, my
eyes would cross, and I would quickly click away from the
site. I firmly believed that tables were the way to go if
you wanted full browser compatibility.
I'm not sure exactly when things changed, or what caused
me to switch sides. Perhaps it was the week when I
sequestered myself to "finally learn about this CSS thing."
Perhaps it was that there were finally lots of free, online
resources for learning more about CSS. Perhaps it was
CSS
Zen Garden and being amazed that one HTML page could
be formatted using CSS in so many different ways.
It's been almost exactly two years since I started
developing exclusively with CSS/HTML, and now I'm probably
annoyingly enthusiastic about CSS. I exclusively develop CSS
templates and have been helping to slowly transition the
mammoth PixelMill site over to valid XHTML/CSS.
Some good reasons for learning CSS
There are many people who have provided eloquent reasons
for learning CSS, and I've linked to additional articles
below. Here are the ones that stand out to me:
CSS sites are easier to develop and maintain. Once
you get past that initial learning curve, CSS sites are
actually easier to develop and maintain than tables-based
sites. I'm not just talking about putting together a
three-column layout -- I'm including the time it takes to
fine-tune the "little details" of a site and modify the site
down the road. Our pre-CSS PixelMill site was a huge pain to
manage -- a design decision to change the font size on the
page involved lots of fancy search-and-replace commands and
having to double-check every page. CSS allowed us to
separate the design and formatting into a separate
stylesheet. Now, it's easy to make a design change -- we can
just open the stylesheet, make modifications to the code,
and the entire site is affected. The designers are happy
because we can make changes and fine-tune as we see fit; the
coders are happy because we aren't messing up the page code
or forcing them to recompile the site's .NET controls.
Using a stylesheet reduces page size and bandwidth.
My old tables-based sites had all sorts of nested tables,
graphics used for spacing table cells, and lots of
additional code for formatting. Using a stylesheet instead
can dramatically cut down the amount of code actually used
on each HTML page. Furthermore, with tables-based sites, all
the formatting/layout stuff on each page has to be
downloaded for each page. With CSS, the stylesheet is a separate file
that only gets downloaded once by the viewer but then
applies to each HTML page, so you're also saving on
bandwidth. We're really only talking about a few dozen
kilobytes that you're saving per page, but if you have a
high-traffic site, a lot of pages, or your hosting account
has you pay for a limited amount of bandwidth, you'll also
be saving dollars -- and who doesn't want to do that?
CSS provides future security. When your site
conforms to web standards (i.e., is compliant with XHTML,
CSS, and accessibility standards), you can rest assured
knowing that it will work reasonably well for future
browsers and devices. Naturally there may be small CSS bugs
to work out, but (going back to my first reason) the fact
that you have an external stylesheet makes it very easy to
fix your entire site. For example, some of our two- and
three-column CSS templates lost the column backgrounds when
IE7 came around and we had some frantic customers calling
us, but we were able to tell them to add one simple line of
code in the stylesheet to fix it.
CSS increases potential to broaden markets. Using
a stylesheet to format your site means that you have future
opportunity to develop alternative stylesheets for other web
devices. For example, the "mobile web" seems to be the Next
Big Thing on the horizon for web developers. In the old
days, new technology meant that you had to develop ANOTHER
separate copy of your site with a different tables-based
layout that worked for that alternative device. Now, you can
simply create a separate, different stylesheet that is
specific to that kind of device and only maintain one
"version" of your web site. One web site, multiple
stylesheets -- when you separate the XHTML content from your
CSS layout, you finally have the opportunity to target those
mobile web users without the headache of maintaining two
separate sites.
Join a broader community. Part of why CSS used to
be so frustrating was because browsers didn't interpret CSS
consistently. But, in fact, there were cross-browser issues
even with tables-based development as well -- those of us
who have developed complex sites with tables know full-well
the various table hacks we had to use to get a site to work
in Netscape and Internet Explorer. (Although if
you've been doing it for a while, those "hacks" might seem
like second nature now!) Browser compatibility has always
been and probably will always be an issue, yet we see
more cooperation between browser companies and the web
standards community than ever before. The simple fact that
there is an established body of people who all agree on
certain specifications for XHTML and CSS (the World Wide Web
Consortium, or the W3C) means that we, who are using those specifications, should try to follow those
guidelines as they were meant to be used. The hard fact is
that tables were never intended for layout; in the current
environment, they don't need to be used for layout anymore.
Call me idealistic, but if all web developers subscribed to
these standards, the browser/device/software world would
follow suit. (Oh wait -- we're already seeing that with
Microsoft's Expression Web and Internet Explorer 7!)
So perhaps "everyone else is doing it" is a pretty
compelling reason after all.
But don't just hear it from me -- here are a few select
articles that you may find helpful to read as well:
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101838.htm
permalink to this article:
http://www.pixelmill.com/support/kb101838.htm
Back to top