There's a class for that

January 8, 2013

Elaine Oliver is an interaction engineer and front end developer. She was part of the project team that created the new website of the Dutch National Museum. In this presentation she shared her experience about creating the OOCSS architecture, responsive design and CSS unit tests.

If you are not familiar with OOCSS or want to know more about it, I recommend you to read the article "An Introduction to Object Oriented CSS" from Louis Lazaris on Smashing magazine website. Another recommendation is SMACSS, a style guide to structure your CSS to allow flexibility and maintainability.

Elaine explains that the new site of the Dutch National Museum must be accessible on different devices, browsers and Internet Explorer 8. There was a lot of pressure to make the site pixel perfect, because there were a number of art designers responsible for the design. Plus they were not familiar with designing for flexible screens. During the project the developers came with new ideas and solutions for the site architecture.

Elaine's goal was to make a flexible and powerful CSS framework, which can be easily used. For example, if another colleague or front end developer wants to make the search function responsive, how cool would it be if you can say: "There's a class for that."? To reach this goal, she decided to do it with OOCSS.

Basics of OOCSS

Elaine gave the following tips to make your CSS object oriented:

• The styles should be content and context independent.
• Define one class that has a number of styles, instead of using multiple selectors.
• Define good names for the classes and their fuction.
• Think in small blocks and give it good and clear names.
• Keep it simple where possible.
• Keep your target group in mind: people who will use your framework.
• Use "js" prefixes or data-role for javascript related CSS.

Can you develop responsive OOCSS?
Yes you can. Elaine's tip is to activate a media query based on a class.

CSS Unit tests

Elaine was so excited and proud with what she had accomplished, but her colleagues din't understand the code. To make it easier to read and to use, she decided to create CSS unit tests. She created online documentation of every class with an example of what it does. This kind of documentation is useful:

• to prevent regression
• for documenting styles
• to have better communication with colleagues
• for prototyping

For creating unit tests Elaine used Razor templates, that worked best for her.

Overall impression

I noticed she used a huge amount of classes just for simple things as margin:0 auto etc. Some HTML elements had about 8 or 10 classes. I wonder if it would make your life as front end developer easier if an element has so many classes? Isn't it hard to maintain?

Besides my personal remarks, I really liked the presentation and the experience Elaine had shared with us. It gave me food for thought and ideas how to make my CSS more object oriented. I do was impressed how flexible the framework is that Elaine created, and her unit tests as well. That had cost her an incredibly amount of time and efford.