CREATING LIVING STYLE GUIDES RefactoringTrulia’s
UI with SASS, OOCSS, and handlebars @stubbornella

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

WE NEED TO KILL THAT
TYPE OF STYLE GUIDE So a new, leaner, more effective version can emerge.

WE BELIEVE IN LIVING STYLE
GUIDES

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

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

a collaboration

TRULIA CHOSE TO CONVERT THEIR
SRP Mainly because it was already on the agenda for a redesign

REAL USER MEASUREMENTS (RUM) What
matters to you?

THEIR NEW HTML IS 48%
SMALLER

21% FASTER LOAD TIME

60% FASTER TIME TO FIRST
BYTE

THEY REDUCED UNUSED CSS BY
135KB

SRP PAGE VIEWS UP 11%

PDP PAGE VIEWS UP 3%

TRULIA ALSO CARES ABOUT... Click
throughs, leads, customer satisfaction, and filter use. All of those metrics also improved.

SO WHAT DOES THAT HAVE
TO DO WITH A STYLE GUIDE?

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

A STYLE GUIDE CAN HELP

WHAT WE WANT IS THIS...

BUT WHAT WE HAVE IS
THIS... styles duplicated over and over

ANALYZING DUPLICATION Grep | CSS
Lint | CSSCSS

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

grep -r font-size . |
wc -l recursively current directory send results count the lines

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

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

ANALYZING DESIGN
INCONSISTENCY
DESIGN INCONSISTENCY

DEMO TYPOGRAPHY TOOL

USE HEURISTICS AND COMMON SENSE
To reduce the total number of styles

BUTTONS

FOR EACH COMPONENT, THREE OPTIONS:
Build! Replace { 1 2 3 Redesign

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

DEMO THE STYLE GUIDE

HOW DO WE BUILD A
COMPONENT?

COMPONENT STRUCTURE Keep component files
self-contained

WE KEEP ALL COMPONENTS TOGETHER
Independent of the apps views

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

SOME COMPONENTS HAVE ASSOCIATED JS
❖ We keep all the parts of a component together ❖ Scripts, Sass, docs, partials, skins, and init functionality

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

WE’LL FOCUS ON THE SASS
You are probably comfortable with templating, watchers, build processes, so we’ll focus on building our styles effectively.

the ubiquitous gray box LET’S
MAKE A GRAY ROUNDED CORNER BOX

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

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:

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

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; }

NEXT, I TRIED TO MAKE
TABS In the OOCSS world, tabs are just a fancy kind of box.

HERE, WE TELL SASS TABS
ARE A BOX:

HERE, WE TELL SASS TABS
ARE 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
SASS and also have good architecture?

BUILD SIMPLE COMPONENTS FIRST as
they often get used in complex ones

VARIABLES

VARIABLES

TYPOGRAPHY

TYPOGRAPHY

HARD TO CALCULATE? CREATE HELPERS
@mobywhale

EASY TO SEE WHAT THESE
VARIABLES DO

LISTS

LINKS

A HANDLEBARS FILE PER
COMPONENT

3 LAYOUT MECHANISMS

GRIDS

GRIDS VARIABLES

MEDIA BLOCK

INLINE LIST

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

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!

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

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