WWYUIGD? Two Guidelines for Writing Hell's Best CSS

WWYUIGD (What would Yahoo User Interface Grids Do?)  is defined as two things:

1. Exaggerating a good idea to such ridiculous proportions that it becomes a bad idea.
2. The duel guidelines that anyone can use to write hell's best CSS

Guideline One: Meaningless numbers are great

The .yui-t(x) set of classes offer powerful control over sidebar widths, and positions. Indeed, so powerful that the classes themselves offer neither clue, nor an understandable pattern. 

1. .yui-t1: 160 on left
2. .yui-t2: 180 on left
3. .yui-t3: 300 on left
4. .yui-t4: 180 on right
5. .yui-t5: 240 on right
6. .yui-t6: 300 on right
7. .yui-t7: One full width column 

If Yahoo was full of sissies, they would have made this system semi easy to remember by using this pattern:

.yui-t-[sidebar position (options are l, r)]-[sidebar size (options are s,m,l)].

Once you remembered that ".yui-t-r-m" would cause the template to have a right sidebar of 180px, you'd also remember what .yui-t-l-s (left sidebar, 160px) meant. That would clearly violates the WWYUIGD philosophy as it doesn't require cheatsheets or flashcards.

Guideline Two: Words bad, Acronyms Good, Meaningless Letters Best

Acronyms are great for saving trace amounts of bandwidth, and confusing yourself for hours. Again YUI Grids are the industry leader in word hating. Not only to they is there not a single complete word in the css -- the letters themselves don't mean anything!

Check out the nesting grids classes  (1/2, 1/2 == two columns of equal width).

1. .yui-g 1/2, 1/2
2. .yui-gb 1/3, 1/3, 1/3
3. .yui-gc 2/3, 1/3
4. .yui-gd 1/3, 2/3
5. .yui-ge 3/4, 1/4
6. .yui-gf 1/4, 3/4

The danger using words, and non-arbitrary numbers can be seen below:

God forbid systems that let you learn one pattern vs 6 numeric IDs.

All in all, yahoo grids is actually great invention. Pity that it had to be ruined by something as small as the names of its classes.