#jon rohan

[dragoni]

Who said CSS wasn't a programming language? Jon tackles one piece of site performance.

A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. The slides are available in PDF form here speakerdeck.com/jonrohan/githubs-css-performance

Rules

no unnecessary tag identifiers, i.e. ul#navigation, ul.menu

no ancestors, i.e. html div tr td

no universal selectors, i.e. * ( display: block; }

no unqualified selectors, i.e. [class^="mini-icon-"] { display:block;}

no chaining, i.e. .small.private.icon { ... }

webkit bug?

Solutions

remove unnecessary HTML

simplify CSS

try to minimize HTML DOM matches

refactor and reuse CSS via components

teamwork!

graph and monitor everything

Tools

CSS Explain

CSS profiler

timeline

audits

Graphite - Scalable Realtime Graphing

GitHub's CSS Performance from Jon Rohan on Vimeo.

[markwyner]

Jon Rohan just published a really nice piece on creating triangles with CSS. It’s concise list of simple examples paired with their respective CSS. And he throws in a more advanced example to show what can be done with what you’ve learned.

There are a large number of articles that showcase this technique. But if you want to fully understand the code you’re writing, Jon’s post is a great place to start.

For example I understand how to create triangles with CSS, but I honestly didn’t realize that browsers draw borders as angles. You never stop learning, eh?