Yahoo's UI Library

Published 11 May 06 by Justin French, 3 comments

Before I go much further, here’s some links:

• YUI Fonts CSS
• YUI Grids CSS
• YUI Reset CSS

I’m not sure what to think of the fonts library right now (it seems to be based on some pretty big assumptions), but let’s take a look at the other two, because they tie in nicely with my views on the reuse and separation of CSS as discussed in my Stylesheet Sanity series (1, 2).

Whether you use Yahoo’s library, or write your own, I feel this stuff is extremely important.

Reset

Having a stylesheet foundation like Yahoo’s reset.css that normalises¹ the basic display of a page across all modern web browsers means you’re throwing out assumptions about each browser’s default styles, and replacing those assumptions with facts.

Grids

Again, I haven’t studied this in detail, and my initial reaction is that they seem to favour short and cryptic class names over something more obvious and descriptive, but this looks like powerful stuff. You’re being handed the tools to deal with almost any kind of CSS layout by standardising the ids and classes of your container divs.

The key here is that the library (this library, or any other library), combined with standardised naming conventions for your mark-up means you can achieve some pretty amazing results quickly and reliably.

Looking back to part 2, I was able to quickly and reliably apply the TextDrive.com redesign to a range of other related sites (like our weblog, the help desk and many more) by standardising my mark-up’s containers, and breaking the reusable parts of my CSS into separate files. I was also able to reuse base.css (my crappy equivalent of Yahoo’s reset.css) on some completely unrelated sites and save myself some time.

Seriously

Just say no to those monstrous all-in-one stylesheets you see on your favourite websites. It’s madness to start with a blank canvas over and over and over again.

• Find or build some libraries that can give you a solid starting point.
• Keep them in version control so that you can easily access them or update them across multiple websites.
• Make a conscious effort to standardise your mark-up wherever possible.
• Break your styles up into separate files which can be used across many websites, across just a particular website, or across just a particular section of the site, and include them only when they’re needed.
• If you spend a substantial amount of time on a nice chunk of CSS that does something you’re likely to do over and over and over again, break it out into it’s own file (eg calendar.css), make it as generic and reusable as you can, then include it, override it and build on it each time you have to solve that problem again.

¹ Yes, I’m allowed to use an “s” instead of a “z” because I’m an Australian.