Cool CSS Grid Builder

[CrispyQ]

I've almost finished working through CSS: The Missing Manual. I learned a lot, but I still feel like a total CSS newbie. I'm a server side developer & I've got to admit, there's way more to CSS than I thought! Anyway, I'm having issues with switching my site from HTML tables to CSS. So I've been searching the net & have found some sites that offer CSS templates. One of the templates names all of their classes yui-7, yui-main, yui-b, yui-u first, etc. I had no idea what yui was, so I Googled "yui, css" & ended up on Yahoo's Developer Network. Nice resource. But I'm still trying to figure out all this CSS grid stuff.

One quick question - why do they use so many class selectors instead of IDs?

BTW, I found this nifty grid builder. I'm still trying to figure out the code behind it, but I thought I'd share this cool tool. http://developer.yahoo.com/yui/grids/builder/

Here's the main page of the Yahoo Developer site. http://developer.yahoo.com/

I would love anyone's input on this topic & CSS in general.

[charlie]

1. Classes aid maintainability

Classes are generic, IDs are specific to an element. You can attach a class to any number of elements with common stylings, so changing a style in all of them becomes a simple matter of changing a single selector, instead of looking up the IDs of myriad selectors and changing those. They keep your stylesheet more compact, with less duplication, easier to parse.

[CrispyQ]

2. I've been reviewing the CSS designs over at the Zen Garden

& it seems the designers there use mostly IDs. The naming conventions on the YUI site are confusing to me, so hopefully after I study the grids more, their choice of classes over IDs will start to make sense. They also seem to use a lot more nested divs than I would. A simple one row, three column section has 8 div tags. I'm sure I just need to spend more time on it, but right now I'm confused as hell. My first "Hello World" program wasn't this confusing!

How long have you been using CSS for your web design? Do you consider yourself a CSS master?

[charlie]

3. No, I'm not a master

I've used CSS for over ten years. I stayed current with the specs for most of that time, but I haven't given more than cursory attention to developments for the past few years. My main interest wasn't in CSS itself, but as an interface to the browser's display for javascript manipulation.

The Zen Garden is more about making CSS do things you thought it couldn't do, overcoming browser quirks and CSS deficiencies, than best practices. The nested divs you saw are almost certainly an example of that, due to the spec's stupid box model.

To make a liquid, resizable 3-column display, you'd guess it'd be a snap: 3 block elements, 33% 34% 33% wide, right? Sure, but add padding, which you'll need so text and images aren't flush against each other, and see what happens. It plumps your columns beyond screen width, because the width of the "box" is the width of the content, which exludes padding. To get the desired effect, you have to nest auto-sized divs within the column divs and put padding or margins on those. Which is a PITA and violates the point of CSS, keeping markup free of elements for styling.

Microsoft had the right idea with their box model -- everything within a box's borders is counted toward its width and height, including padding. After years of hearing people bitch and seeing all the tag pollution it's caused, the W3C has finally inserted a fix into the specs, in the form of a selector switch where you can choose the box model rendering. Clunky, but they let that goofy canonical model run so long there was probably no other way to do it.