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.

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

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.

9. WE BELIEVE IN LIVING
STYLE GUIDES

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)

12. a collaboration

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

15. REAL USER
MEASUREMENTS (RUM)
What matters to you?

16. THEIR NEW HTML IS 48%
SMALLER

17. 21% FASTER LOAD TIME

18. 60% FASTER TIME TO
FIRST BYTE

19. THEY REDUCED UNUSED
CSS BY 135KB

20. SRP PAGE VIEWS UP 11%

21. PDP PAGE VIEWS UP 3%

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

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

25. A STYLE GUIDE CAN HELP

26. WHAT WE WANT IS THIS...

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

28. ANALYZING DUPLICATION
Grep | CSS Lint | CSSCSS

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

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

32. 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!

33. ANALYZING DESIGN
INCONSISTENCY
DESIGN INCONSISTENCY

34. DEMO TYPOGRAPHY TOOL

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

39. BUTTONS

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

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

42. DEMO THE STYLE GUIDE

43. HOW DO WE BUILD A
COMPONENT?

44. COMPONENT STRUCTURE
Keep component files self-contained

45. WE KEEP ALL
COMPONENTS
TOGETHER
Independent of the apps
views

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.

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

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.

56. HERE, WE TELL SASS TABS
ARE A BOX:

57. HERE, WE TELL SASS TABS
ARE A BOX:

58. OMG! OUTPUT IS BAD!

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

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

61. THE INCEPTION RULE:
Never go more than three levels deep

62. SO HOW DO WE USE SASS
and also have good architecture?

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

64. VARIABLES

65. VARIABLES

66. TYPOGRAPHY

67. TYPOGRAPHY

68. HARD TO CALCULATE?
CREATE HELPERS
@mobywhale

69. EASY TO SEE WHAT THESE
VARIABLES DO

70. LISTS

71. LINKS

72. A HANDLEBARS FILE PER
COMPONENT

74. 3 LAYOUT MECHANISMS

75. GRIDS

77. GRIDS VARIABLES

78. MEDIA BLOCK

79. INLINE LIST

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!

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

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