in CSS, User Experience

CSS Framework Comparison

Code Quality

Most people, especially developers, don’t like to read volumes of documentation. Personally, I like to be able to look at the code itself, which is the best documentation, and a couple of implementation examples to learn how to use a tool. The code needs to be intuitive, clean, well-commented and/or easy to follow.

The code for all three frameworks is very clean. In the uncompressed source code, the formatting makes the source easy to read and I had no trouble understanding any of the code. Blueprint CSS and 960 Grid System use more intuitive selector names such as “span-8” and “grid_8” respectively, while YAML uses more concise but less intuitive names like “c50r”.

I don’t want to leave the reader with the impression that YAML’s code is difficult to understand. It only took me a couple of minutes to realize that “c50r” means “column 50% right” for example. All of the selector names are similarly abbreviated and all are equally easy to decipher. Once I started coding with YAML I found I really liked the short selector names.

YAML gets the highest marks for the quality and usefulness of in-code commenting. Every code block is commented in both English and German and I was able to easily understand exactly how the code’s author intended each block of code to be used.