WWYUIGD? Two Guidelines for Writing Hell's Best CSS

Thu, 2008-01-31 19:16 — Nick Lewis

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

Exaggerating a good idea to such ridiculous proportions that it becomes a bad idea.
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.

.yui-t1: 160 on left
.yui-t2: 180 on left
.yui-t3: 300 on left
.yui-t4: 180 on right
.yui-t5: 240 on right
.yui-t6: 300 on right
.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).

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

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

.yui-quarters-2-2 = 1/2, 1/2

.yui-thirds-1-1-1 = 1/3, 1/3, 1/3

.yui-thirds-2-1 = 2/3, 1/3

.yui-thirds-1-2 = 1/3, 2/3

.yui-quarters-3-1 = 3/4 1/4

.yui-quarters-1-3 = 1/4 3/4

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.

Nick Lewis's blog
Login or register to post comments

Comments

Mon, 2008-02-04 21:51 — themegarden.org (not verified)

Their names are dull, but

Their names are dull, but their work is great.

Fri, 2008-02-01 18:14 — m3avrck (not verified)

blueprint is your answer

My new blueprint theme (based on the blueprint CSS framework) is due out very soon: http://drupal.org/project/blueprint

I'll have more details posted on my blog/drupal planet in a week or 2.

Fri, 2008-02-01 04:11 — Matt Westgate (not verified)

yui-t is short for "Yahoo

yui-t is short for "Yahoo User Interface Template" and it's meant to define the overall page layout. Sure, a numerical index for classes is corny, but the naming convention does have some wins. yui-g is for grids within the template, and yui-u is a unit inside a grid. The simple breakdown with these names is refreshing as the lines between header, sidebar and content aren't always relevant to every design. The cheat sheet explains a little more: http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

Fri, 2008-02-01 04:51 — Nick Lewis

Yeah, i read over the cheat

Yeah, i read over the cheat sheet. This article was actually going to be a lot more general, but then that cheatsheet inspired me to focus on yui's names. That's what bugs me though. How is it a template? Why not a layout? wouldn't layout be more accurate word then template?

Why no words? Why?! If I wanted to decode something, I'd buy crackerjacks so I could get their special ring at the bottom of the box. If i'm using a CSS framework, having to decoding letters and numbers is a deal breaker.

And why YUI on the front of everything. IT makes it impossible to scan through styles and understand what's going on quickly.

Fri, 2008-02-01 01:23 — Caleb G (not verified)

If you're interested in YUI Grids

It is may be worth your time to take a look at ATCK. (disclaimer: ATCK, imho, improves on grids, but it doesn't solve the semantic issue, fyi...)

Thu, 2008-01-31 21:06 — ximo (not verified)

That big, annoying flaw

I agree, this is a big irritation factor to an otherwise excellent tool. You can override these names though, but you would have to host your own version of the grids css file. The downside would be that you'd have to do the same if you want to upgrade to a newer version of Grids, and you'd loose the advantage of having your code on Y! servers, providing better speeds for users across the world. Still, I think I'll go with hacking Grids. Thanks for your excellent naming suggestions :)

Thu, 2008-01-31 21:35 — Nick Lewis

If I were to rename it for

If I were to rename it for production use, I'd also do this:
1. Cut out .yui across the board -- the class names aren't going to have namespace issues, I promise.
2. .yui-t becomes '.sidebar-' [ weird in the context of the html, but its accurate in that those classes only affect a sidebar ]
3. .yui-g becomes '.grid'... duh... its even shorter for god's sake!
4. .yui-u becomes '.cell' or '.unit'.

Amazing how much easier things are to understand when they use language.

Sun, 2008-02-10 14:30 — ximo (not verified)

Come to think of it..

Instead of tiny, small, medium, large for the asides, I think xs, s, m, l might be more suitable. Tiny isn't really tiny compared to small, it's just a little bit smaller. XS, S, M, L are common names for clothing sizes, it was the best I could think of :)

Thus:

.yui-t1 => .aside-left-xs
.yui-t2 => .aside-left-s
.yui-t8 => .aside-left-m
.yui-t3 => .aside-left-l
.yui-t9 => .aside-right-xs
.yui-t4 => .aside-right-s
.yui-t5 => .aside-right-m
.yui-t6 => .aside-right-l
.yui-t7 => .aside-bottom

Although not quite universal, it works for me..

Sun, 2008-02-10 14:19 — ximo (not verified)

YUI Grids renamed

These are the class and ID names I ended up using:

#doc => #centered-small
#doc2 => #centered-large
#doc3 => #fluid-fill
#doc4 => #fluid-large
.yui-t1 => .aside-left-small
.yui-t2 => .aside-left-medium
.yui-t3 => .aside-left-large
.yui-t4 => .aside-right-small
.yui-t5 => .aside-right-medium
.yui-t6 => .aside-right-large
.yui-t7 => .aside-bottom
.yui-g => .grid-1-1
.yui-gb => .grid-1-1-1
.yui-gc => .grid-2-1
.yui-gd => .grid-1-2
.yui-ge => .grid-3-1
.yui-gf => .grid-1-3
.yui-main => .main
.yui-b => .section
.yui-u => .unit

.hd => .header .bd => .body .ft => .footer

I didn't want to add the widths in pixels to the document ID names, so I used generic names like small, large and fill.

"Aside" is a better name than "sidebar", as you can also put it below your main content (.aside-bottom). Yes, it was highly inspired by HTML5's <aside> element ;)

As for the "grid" classes, I found it easier to specify the number of columns in ratio values (1-1 = 2 equal columns, 1-1-1 = 3 equal, 3-1 = one 3/4th column and one 1/4th, etc).

I couldn't use .block for .yui-b, as .block is a reserved class name for blocks in Drupal, but .section makes just as much sense - at least in my design.

You may also find this addition to YUI Grids useful, it adds the missing 240px left and 160px right sidebar layouts.

Adding the missing sidebar layouts, my naming scheme for "asides" now looks like this:

.yui-t1 => .aside-left-tiny
.yui-t2 => .aside-left-small
.yui-t3 => .aside-left-large
.yui-t4 => .aside-right-small
.yui-t5 => .aside-right-medium
.yui-t6 => .aside-right-large
.yui-t7 => .aside-bottom
.yui-t8 => .aside-left-medium
.yui-t9 => .aside-right-tiny

Thu, 2008-01-31 21:01 — dvessel (not verified)

This is the reason why I

This is the reason why I stayed away from Yahoos' implementation. It's completely absurd trying to remember what does what.

I'm not even sure it's possible to maintain good semantics in any generalized frame work. It usually comes from specific implementations but still it's tricky when applying that to Drupal since anything can be pushed anywhere so easily through block regions. So, we're stuck describing position instead of what it does.

Thu, 2008-01-31 21:21 — Nick Lewis

I agree with you on drupal's

I agree with you on drupal's css classes and IDs. Personally, I think drupal theme developers should be encouraged to use standard names:
#header
#content
#content #main-content
#content #sidebar-right
#footer

That way block regions can be better standardized, so switching themes doesn't force users to reconfigure blocks since once theme calls it 'sidebar', another "sidebar left", and another still "navigation". That would also allow module developers to perhaps one day optimize a search block for the header region, vs the right sidebar.

It also would help make styles between themes be more interchangable for developers.

Those and other advantages trump the "semantic names only" arguments I hear all the time. I don't really get why a class or ID should always describe the purpose and meaning, instead of say -- what part of the page it is. #main-content is easier to remember then "#copy", or "#center-of-attention", or "#article" -- seems like describing "meaning" simply adds more opprotunities for arbitrary names -- and thus makes it harder to develop for that stylesheet.

Thu, 2008-01-31 20:45 — Island Usurper (not verified)

Preach on

I once had to port a theme to Drupal from a static mock-up that used the Yahoo! grids. The hardest part was figuring out what I could safely mess with.

This is almost as bad as indexing your XML tags:
<subject></subject>
<subject2></subject2>
<subject3></subject3>

Thu, 2008-01-31 20:54 — Nick Lewis

A true WWYUIGD xml tag

A true WWYUIGD xml tag equivalent would probably be:

<ea1></ea1>
<ea2></ea2>
...

Remember, words are bad. In the above example "e" stands for element, "a" is meaningless, and just happens to be the first letter in the alphabet, and 1,2,3,4's meaning can be found in the docs. :-)

Nick Lewis: The Blog