Leveraging CSS is 75% Markup and 25% CSS
posted Jun 29, 2008 at 12:17:14 PM by Doug Gibson.
I really planned to do more ColdFusion blogging, but I find myself more intrigued by CSS lately. After all these years there still seems to be some mystique about CSS to some developers and designers alike.
Over the past couple of years I've been refining my process for creating site layouts and modular CSS. During that time, most of the refactoring involved has been reworking parts of the markup to be more modular or to use markup that meets my (now) more strict semantic requirements (than when I first started using CSS) and provides all of the hooks for the techniques I may want to apply with CSS. I'm still refining some smaller things here and there, as I discover new techniques.
I recently returned to working on the application that I did my very first table-less CSS layout on, and looking at the markup, I can see what a difference semantic markup makes!
I've been using CSS since 1998 (more heavily in 1999), but didn't really know the best practices in markup until the last few years, making my initial efforts at CSS layouts frustrating attempts of trial and error - not unlike the experience of using CSS in Netscape 4! I actually abandoned my first attempt at redesigning Metalunderground.com in CSS because the layout was too complex for me to pull off. I finally opted for a wrapper table and minimally nested table layout. (Note: Metalunderground.com has since been redesigned twice, first using CSS and then a recent underlying code cleanup, which helped immensely for general coding and CSS-specific techniques).
As many developers and designers can attest, learning CSS itself isn't as hard as knowing which techniques to use in various scenarios, the drawbacks to certain techniques, and how to work around browser-related bugs. Some techniques such as floats versus absolute positioning are purely CSS, but a number of other techniques are based on how you've chosen to mark up your document.
Compound that with the sad truth that many web designers and developers - even experienced ones - don't really know proper HTML or XHTML, much less the best practices of semantic markup, and you can see why CSS still appears difficult after all these years. I was in the same position about five years ago, having used CSS for several years, but still struggling with CSS layout due to not using the best practices for the underlying markup or knowing the proper techniques to use.
So why is it that many developers don't know proper HTML or XHTML? I've encountered all sorts of reasons for this - legitamate and not - over the years. Here are some of the reason that web developers and designers may not know basic proper (X)HTML markup and therefore may have trouble with CSS layout:
- Learned HTML in the "early days" (HTML 3.2 or earlier) and never refreshed their knowledge of HTML 4 or XHTML, semantic markup, or doctypes for that matter.
- Self-taught HTML during the IE years and never really learned how to do it right because IE will render any old slop. Probably cursed Netscape 4 for breaking their pages when forgetting to close a td tag.
- Concentrates on backend programming and doesn't really bother with strict markup for the front-end.
- Sees no benefit to XHTML or strict HTML.
- Doesn't deal with the front-end display and CSS, and therefore never needed to learn about semantic markup.
- Not really into the whole developer thing and just gets by doing what they are doing, creating web sites and applications, without trying to learn or integrate best practices.
It might sound harsh to say that a developer "doesn't even know HTML." After all, HTML is the foundation of the web for the past 12+ years. But I think it's pretty realistic to say that we all know a number of these types of people described above and they account for a large portion of developers. Granted, not everyone needs to know strict HTML, but in my 10+ years in the industry and seven jobs, I've never worked for a company that has a dedicated HTML person write all HTML or clean up what the "programmers" have written after the fact.
With invalid markup, all sorts of cross-browser issues can surface. Without knowing about semantic markup - using markup that fits the meaning or type of data rather than its desired presentation - developers may find themselves in div-hell, much like nested-table hell of yesteryear, if not completely baffled by CSS issues and browser bugs that are more likely to occur with invalide markup.
Without knowing the best way to mark up certain page elements such as navigation, one may be lost as to how to achieve a certain effect in CSS or go down the road of adding additional presentational markup for extra hooks (it's not all bad, but the less non-semantic markup that is added, the better, IMO).
CSS tutorials often tend to focus on the CSS itself and gloss over the underlying markup and reasons for using it. There are plenty of older or just plain bad CSS demos that do not follow the principles of modular or semantic code as well, leading developers down the wrong path; most often to div or span-hell and/or class-itis. Cut and paste CSS sites seem barely a step above their JavaScript counterparts - they are both usually pretty bad solutions.
So what was the point of all that? Just to stress to go out there and refresh your knowledge of HTML. I remember being surprised to learn about a number of HTML 4 elements and their effects in the browser some time back, and there are still people who don't know what a <label> is or have never used a <caption>, <thead> or <tbody> much less <colgroup> and <col> tags in a table. Almost all of these lesser known tags are essential hooks in styling semantic markup with CSS and key to modern CSS techniques.
So, if you don't know what a DOCTYPE is or you're still using tables for layout, or you're just having trouble with CSS, it's probably time to get up to date on XHTML and semantic markup. It will decrease the learning curve for using CSS layouts significantly.
Time permitting, I'll expand on some of these specific techniques as they relate to CSS in another article in the near future.
UPDATE: And look - Sitepoint just sent out a newsletter about "sprucing up your HTML" knowledge. Perfect timing.
