I’ve been building web applications since the beginning of the World Wide Web and yet I’ve never become very knowledgeable about CSS.

I’ve listened to the arguments about page layout (styles versus tables) and hacked my way through enough CSS but always found myself more frustrated than enthralled.

JavaScript frustrated me in the early days too. Compared to C++, Java, C#, etc it left “dirty” to me but I’ve grown to enjoy and embrace JavaScript and I know that I need to do the same thing with CSS.

CSS is very powerful but you need embrace it to really Grok (http://en.wikipedia.org/wiki/Grok) it.

But, I have some issues :

  • I’m in a hurry – I need to be building apps now.
  • I don’t think aesthetically – I’m a bits and bytes guy.
  • I’m a pragmatist – I don’t care about purist type elegance.

So I’m choosing a “CSS Framework”.

If you search the web you can find lots of discussions about why NOT to use a CSS framework. Purists say that a CSS Framework is a contradiction in terms, but I suspect that 99% of developers doing significant client side work are using a CSS framework, even if their framework of choice is a collection of code that they wrote themselves (as opposed to someone else’s formal framework).

There are some basic criteria when choosing any framework.

  • Rich Functionality
  • The flexibility to extend and modify features
  • Understandable code
  • Good Documentation
  • Good usage examples
  • A vibrant community
  • An implementation that works the way I want to work

When it comes to choosing a CSS framework there are some additional criteria.

  • Reset Strategy
  • Typography Implementation
  • Semantic Naming

Especially “Semantic Naming” becomes incredibly important the more complex your markup becomes.

There is a cyclic relationship between HTML Elements as Identified by “Id”, CSS Classes that are applied to those elements and the JavaScript code that is executed against those elements, often that are found by way of the classes assigned to them.

Random naming of CSS classes or a set of naming conventions that lack logical value can turn the whole stack into a mess.

So, good naming strategy is crucial to a usable CSS framework and a way to customize naming in conjunction with your application’s problem domain is even better.

There are LOTS of CSS frameworks to choose from and several dozens of blog posts on the web listing the popular ones.

Rather than enumerate all the ones that I did NOT choose, I though I’d share some reasons for choosing the one that I did choose.

My criteria seems to be best met by Blueprint CSS (http://blueprintcss.org/)

  • A CSS reset that eliminates the discrepancies across browsers.
  • CSS Reset based on Eric Meyer’s (http://meyerweb.com/eric/tools/css/reset/)
  • A solid grid that can support the most complex of layouts.
  • Typography CSS that implements a baseline grid.
  • Form styles.
  • Print styles.
  • A Plugin model and a collection of available plugins.
  • En ecosystem for use in different development. (WordPress, Drupal, etc)
  • Tools, editors, and templates.

While the checklist seems complete is the combinatorial effect that we end up being interested in.

For example, using a CSS reset by itself nullifies browser defaults (which all tend to look different to the user) but using a CSS reset by itself, especially one as complete as Eric Meyer’s, means there is a lot of default behavior to be re-defined. Of course Blueprint CSS handles this for us.

For my needs there is one more very important feature of using Blueprint CSS.
Blueprint CSS comes with a Ruby script that lets you customize Blueprint style sheets using your own semantic class names.

This isn’t a matter of purism for me. UI code and markup can get very complex and maintainability, as well as debugging, can be drastically effected by semantic naming.

Standard framework names like these :


<div class="span-9 last">
<div class="grid_6 alpha">

… are learn-able, but just have no RELATIVE meaning inside our own application.

Here is some good information on CSS Semantics and using the Blueprint CSS customizer.

http://joshuaclayton.me/blueprints_compress_a_walkthrough.html
http://www.sitepoint.com/css-frameworks-semantic-class-names/

More to come…..