CREATING LIVING STYLEGUIDESRefactoringTrulia’s UI with
SASS, OOCSS, and handlebars@stubbornella

WHY DON’T THESE STYLEGUIDES WORK?❖
They take months to produce❖ Often out of date before they are ever pdf’ed❖ They are design centric and exclude engineering from theequation

WE NEED TO KILL THATTYPE
OF STYLE GUIDESo a new, leaner, more effective version can emerge.

WE BELIEVE IN LIVINGSTYLE GUIDES

WHAT IS A LIVING STYLEGUIDE?❖
Guide to existing site styles❖ Lives in code, so it evolves with the site or app❖ Collaboration tool for engineering and design teams to worktogether

A GOOD STYLE GUIDELEADS TO:❖
Better UI layer code❖ More informed design choices❖ A better performing site (we’ll show you how)

a collaboration

TRULIA CHOSE TOCONVERT THEIR SRPMainly
because it was already on the agenda for a redesign

REAL USERMEASUREMENTS (RUM)What matters to
you?

THEIR NEW HTML IS 48%SMALLER

21% FASTER LOAD TIME

60% FASTER TIME TOFIRST BYTE

THEY REDUCED UNUSEDCSS BY 135KB

SRP PAGE VIEWS UP 11%

PDP PAGE VIEWS UP 3%

TRULIA ALSO CARESABOUT...Click throughs, leads,
customer satisfaction, and filter use. All ofthose metrics also improved.

SO WHAT DOES THATHAVE TO
DO WITH ASTYLE GUIDE?

YOUR CSS CAUSES LOTSOF 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

A STYLE GUIDE CAN HELP

WHAT WE WANT IS THIS...

BUT WHAT WE HAVE ISTHIS...styles
duplicated over and over

ANALYZING DUPLICATIONGrep | CSS Lint
| CSSCSS

ON THIS PROJECT WEUSED 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

grep -r font-size . |
wc -lrecursively current directorysend results count the lines

TRULIA DETAILSh1-h6 564font-size 2267margin 3993padding
4493padding: 0 1214margin: 0 1019Lots of room for improvement!

TRULIA DETAILS!important 495color 3920hex 6464#fff
1297total rules 16,225background 4888Unused CSS (home page) 186kb or 74%Lots of room for improvement!

ANALYZING DESIGNINCONSISTENCYDESIGN INCONSISTENCY

DEMO TYPOGRAPHY TOOL

USE HEURISTICS ANDCOMMON SENSETo reduce
the total number of styles

BUTTONS

FOR EACH COMPONENT,THREE OPTIONS:Build!Replace{123 Redesign

DO THIS FOR ALLCOMPONENT TYPES...Try
to find as many variations as you can

DEMO THE STYLE GUIDE

HOW DO WE BUILD ACOMPONENT?

COMPONENT STRUCTUREKeep component files self-contained

WE KEEP ALLCOMPONENTSTOGETHERIndependent of the
appsviews

CREATE SMALL FILES❖ Less merge
conflicts❖ Easier to include/exclude acomponent

SOME COMPONENTSHAVE ASSOCIATED JS❖ We
keep all the parts of acomponent together❖ Scripts, Sass, docs, partials,skins, and init functionality

HOW WE COMPILEOUR 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 wheneverthe handlebars, Sass, or JavaScript are saved

WE’LL FOCUS ON THESASSYou are
probably comfortable with templating, watchers, buildprocesses, so we’ll focus on building our styles effectively.

the ubiquitous gray boxLET’S MAKE
A GRAYROUNDED CORNER BOX

MY BOX NEEDS CLEARFIXso let’s
create a mixin and see how it affects the output.@include

WHAT DO MIXINS DO TOTHE
OUTPUT?Property value pairs are copied throughout the stylesheet@mixin clearfix-­‐overflow { overflow:hidden; *overflow:visible; zoom:1;}.myCoolThing { @include clearfix-­‐overflow;}This:

PROPERTY VALUE PAIRSARE COPIED:.myCoolThing {
overflow:hidden; *overflow:visible; zoom:1;}Becomes:

IF YOU’VE USED IT MORETHAN
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;}

NEXT, I TRIED TOMAKE TABSIn
the OOCSS world, tabs are just a fancy kind of box.

HERE, WE TELL SASS TABSARE
A BOX:

HERE, WE TELL SASS TABSARE
A BOX:

OMG! OUTPUT IS BAD!

OMG! OUTPUT IS BAD!notice line
numbers and file name

OH SO TEMPTING...to make the
SASS nesting match the html nesting!It feels so good!

THE INCEPTION RULE:Never go more
than three levels deep

SO HOW DO WE USE
SASSand also have good architecture?

BUILD SIMPLECOMPONENTS FIRSTas they often
get used in complex ones

VARIABLES

VARIABLES

TYPOGRAPHY

TYPOGRAPHY

HARD TO CALCULATE?CREATE HELPERS@mobywhale

EASY TO SEE WHAT THESEVARIABLES
DO

LISTS

LINKS

A HANDLEBARS FILE PERCOMPONENT

3 LAYOUT MECHANISMS

GRIDS

GRIDS VARIABLES

MEDIA BLOCK

INLINE LIST

MAKE IT EASIER TO DOTHE
RIGHT THING THANTHE WRONG THINGPeople will have a tendency to go back to “views” based CSS,unless they have been shown another way

TAKE AWAYS:❖ This was clearly
a group effort, these metrics improvedbecause of design, style guide, Sass, UI layer improvements, andserver side cleanup❖ Sass can be made to be performant when effectivelycombined with OOCSS for architecture and styleguides fororganization❖ Most importantly, the team is enjoying working on the UIcode.They feel ownership, and want to improve it.❖ Good performance is a feature!

GET THE CODE:https://github.com/stubbornella/oocss

THANK YOU!@stubbornellahttps://github.com/stubbornella/oocss