Nicole Sullivan Talks OOCSS and Process
2011 June 25Nicole Sullivan (aka @stubbornella) brought Object-oriented CSS (OOCSS) to NYC last Thursday in an updated presentation on how our best practices in CSS are killing us. She was refreshingly candid and it was great to have insight into her work process with big clients.
First, some data...
Facebook was kind enough to share some data on its CSS revamp that Nicole helped with. Some stand-outs of their CSS code debt:
- 100MB of CSS. Have to use grep; can't read it all
- Blue brand color declared 261 times
- 558 unique hex values
- 6498 total color declarations
Salesforce, another of Nicole's clients, had almost 4000 padding declarations. This is evidence of a long history of tweaking the page layout and presentation. Although "ugly," one of Nicole's deliverables actually included reusable padding classes (more on that later).
(Some) CSS best practices are myths
Don't add extra elements. This is usually based on concern that HTML size is going to grow and download speeds and SEO may suffer. However, data show that the size of HTML actually decreases with OOCSS.
Just go ahead and change markup. Think of the markup as LEGO pieces you can copy paste around the site. That's your unit of re-use.