An Event Apart: Object Oriented CSS

by Luke Wroblewski May 24, 2010

In her Object Oriented CSS talk at An Event Apart in Boston MA, Nicole Sullivan shared ways to optimize CSS code and why performance matters for Websites.

Why Care About Performance?

  • Yahoo! 5-9% drop in full page traffic from an added 400ms
  • Google lost 20% of searches from an added 500ms
  • Shopzilla improved Website performance by 3.5 seconds and conversion rate went up 7-12% and page views went up 25%
  • Bing and Google added added 200ms to a page it took people 500ms to make a first click. People get out of their flow when performance degrades
  • Over time, as you slow down user experience, people’s interactions get worse and worse. Even when people’s performance gets improved, if you lost them before, they may not come back. Build performance into your process.
  • Active users are the ones most impacted by performance. Time to click is two times worse than the delay was. Your users care about performance.
  • The biggest thing you can do to improve performance is reduce file size and number of http requests. CSS is a factor in both of these. We have to do CSS right.

CSS Issues

  • CSS code is too fragile -even the cleanest code can get ruined by the first non-expert to work on it. CSS requires expert ability to just get started.
  • Code re-use is almost non-existent. Most people start over when writing CSS.
  • Because of these issues, file size just keeps getting.

CSS Cascade

  • Browsers all have default styles. All these internal style sheets are different. A CSS reset sheet can make things equal across browsers.
  • Browsers ignore code they don’t understand. Invalid property values are skipped.
  • The order of classes does not guarantee which one will be applied first.
  • The last property value pair in a CSS declaration is the one that applies.
  • The order of style sheets also matters. The last style sheet wins.
  • CSS inheritance: properties are inherited by child elements. For example, paragraphs inherit the font-size of the body.
  • IDs win over classes. Inline styles win over external style sheets. !important wins even over inline styles.
  • Avoid ID, inline and !important when styling elements. This allows cascade order to determine the winner.
  • You can use the cascade ordering of styles to save code and improve performance.
  • Avoid applying styles in a “.message.error” manner. This causes issues in some browsers.

Optimizing CSS

To optimize CSS: reduce duplication and improve predictability (don’t change expectations based on where the component is).

  • Step one to manage CSS file size: analyze how much duplication there is.
  • Step two is to find simple solutions. Problems may seem complicated but that does not mean they necessarily are. Determine what you can know about each object and determine what you can’t know.
  • Simplify specificity: use hacks very sparingly and in way that does not impact specificity.
  • Avoid styling IDs: they impact specificity and can’t be re-used
  • Avoid styling elements: style classes instead
  • Avoid !important :except on leaf nodes
  • Give all rules the same strength: use cascade order to overwrite previous rules.
  • Reuse elements: this makes them performance “freebies”