Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Nicole SullivanPrincipal Software Engineer & Engineering Manager at Pivotal
7. WHY DON’T THESE STYLE
GUIDES WORK?
❖ They take months to produce
❖ Often out of date before they are ever pdf’ed
❖ They are design centric and exclude engineering from the
equation
8. WE NEED TO KILL THAT
TYPE OF STYLE GUIDE
So a new, leaner, more effective version can emerge.
10. WHAT IS A LIVING STYLE
GUIDE?
❖ Guide to existing site styles
❖ Lives in code, so it evolves with the site or app
❖ Collaboration tool for engineering and design teams to work
together
11. A GOOD STYLE GUIDE
LEADS TO:
❖ Better UI layer code
❖ More informed design choices
❖ A better performing site (we’ll show you how)
23. SO WHAT DOES THAT
HAVE TO DO WITH A
STYLE GUIDE?
24. YOUR CSS CAUSES LOTS
OF PERF ISSUES
❖ It blocks progressive rendering
❖ It pulls in background images
❖ It correlates directly to render speed
❖ It slows your javascript
❖ It causes janky scrolling and animations
29. ON THIS PROJECT WE
USED GREP
❖ Include all your most crufty CSS for best results.
❖ Grep for various selectors, properties, and values
❖ Don’t worry about perfect, we just need orders of magnitude
30. grep -r font-size . | wc -l
recursively current directory
send results count the lines
46. CREATE SMALL FILES
❖ Less merge conflicts
❖ Easier to include/exclude a
component
47. SOME COMPONENTS
HAVE ASSOCIATED JS
❖ We keep all the parts of a
component together
❖ Scripts, Sass, docs, partials,
skins, and init functionality
48. HOW WE COMPILE
OUR COMPONENTS
❖ JSON file that references components (we don’t love this bit)
❖ @import component Sass files
❖ Watchers set up to automatically build all the docs whenever
the handlebars, Sass, or JavaScript are saved
49. WE’LL FOCUS ON THE
SASS
You are probably comfortable with templating, watchers, build
processes, so we’ll focus on building our styles effectively.
51. MY BOX NEEDS CLEARFIX
so let’s create a mixin and see how it affects the output.
@include
52. WHAT DO MIXINS DO TO
THE OUTPUT?
Property value pairs are copied throughout the stylesheet
@mixin
clearfix-‐overflow
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
.myCoolThing
{
@include
clearfix-‐overflow;
}
This:
53. PROPERTY VALUE PAIRS
ARE COPIED:
.myCoolThing
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
Becomes:
54. IF YOU’VE USED IT MORE
THAN ONCE:
.myCoolThing
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
.myCoolThing2
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
.myCoolThing3
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
.myCoolThing4
{
overflow:hidden;
*overflow:visible;
zoom:1;
}
55. NEXT, I TRIED TO
MAKE TABS
In the OOCSS world, tabs are just a fancy kind of box.
80. MAKE IT EASIER TO DO
THE RIGHT THING THAN
THE WRONG THING
People will have a tendency to go back to “views” based CSS,
unless they have been shown another way
81. TAKE AWAYS:
❖ This was clearly a group effort, these metrics improved
because of design, style guide, Sass, UI layer improvements, and
server side cleanup
❖ Sass can be made to be performant when effectively
combined with OOCSS for architecture and styleguides for
organization
❖ Most importantly, the team is enjoying working on the UI
code.They feel ownership, and want to improve it.
❖ Good performance is a feature!