One of the frustrating aspects of coding CSS is the ad-hoc approach in crafting styles. It felt all my software development practices went out the window. Compass, a stylesheet authoring framework, along with Sass, a stylesheet language, has alleviated most of my pain. However, implementation still varies from developer to developer.
I have refined my approach to focus on styling content elements first (e.g. H1, ul, p tags), the grid, and finally the chrome (e.g. backgrounds). While this approach has worked quite well, I'm still not completely satisfied on the reusability of the "chromed" elements. This is where Nicole Sullivan comes in, developer of the OO CSS framework. While a Compass implementation is in the works, I'm quite happy adapting the philosophy of the framework to may current workflow. Specifically the 10 Best practices she outlines in her presentation Object Oriented CSS:
- Create a component library
- Use consistent semantic styles
- Design modules to be transparent on the inside
- Be flexible
- Learn to love the grid
- Minimize selectors
- Separate structure and skin
- Separate container and content
- Extend objects by applying multiple classes
- Use reset and fonts from YUI
Practices 7 and 8 need more explanation. Below are comments from Nicole's blog post announcing the framework hosted on Github.
Separate structure and skin
Abstract the structure of the block from the skin which is being applied.
Separate structure from skin isn’t about HTML and CSS. Within the CSS, have one class that takes care of all of the little presentational elements, browser differences, basically all the complicated bits. Then build on that class with multiple skin classes, which then only need to contain simple things like border colors, background images, etc. The skins become super predictable.
Separate container and content
Break the dependency between the container module and the content objects it contains.
A glance at the CSS of most sites will tell you no one is doing this properly. At best we manage to separate by module, or sandbox individual components. Unfortunately, each of the modules has container and content completely tied together. This makes the CSS grow over time and the site not scale or perform well.
Her nine pitfalls are also worth noting:
- Location dependent styles
- Avoid specifying what tag a class applies
- Avoid IDS to style inside the main content areas
- Avoid drop shadows and rounded corners over irregular backgrounds
- Don't sprite every image together (unless your site has very few pages)
- Avoid height alignment
- Text as text, not as images
- Redundancy
- Avoid premature optimization
Nicole's presentation is well worth watching if you intend to adopt such a framework, or simply wish to improve you CSS authoring skills. I have included the video of the presentation below along with the slides. Here are some helpful links if you wish to research further:
- OOCSS.org
- Github Repository and Wiki
- OO CSS Google Group
- 5 Mistakes of Massive CSS (Video)
- 5 Mistakes of Massive CSS (Slides)
