Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 de...
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❖ Collaborat...
A GOOD STYLE GUIDELEADS TO:❖ Better UI layer code❖ More informed design choices❖ A better performing site (we’ll show you ...
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...
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, a...
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...
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 ...
HOW WE COMPILEOUR COMPONENTS❖ JSON file that references components (we don’t love this bit)❖ @import component Sass files❖ W...
WE’LL FOCUS ON THESASSYou are probably comfortable with templating, watchers, buildprocesses, so we’ll focus on building o...
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  { ...
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;}.myCoolT...
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 ...
TAKE AWAYS:❖ This was clearly a group effort, these metrics improvedbecause of design, style guide, Sass, UI layer improve...
GET THE CODE:https://github.com/stubbornella/oocss
THANK YOU!@stubbornellahttps://github.com/stubbornella/oocss
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Upcoming SlideShare
Loading in …5
×

Creating Living Style Guides to Improve Performance

127,238 views

Published on

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.

Published in: Technology
no profile picture user
  • Greetings from Poland.
    http://www.fastlaw.pl
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More

Creating Living Style Guides to Improve Performance

  1. CREATING LIVING STYLEGUIDESRefactoringTrulia’s UI with SASS, OOCSS, and handlebars@stubbornella
  2. 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
  3. WE NEED TO KILL THATTYPE OF STYLE GUIDESo a new, leaner, more effective version can emerge.
  4. WE BELIEVE IN LIVINGSTYLE GUIDES
  5. 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
  6. A GOOD STYLE GUIDELEADS TO:❖ Better UI layer code❖ More informed design choices❖ A better performing site (we’ll show you how)
  7. a collaboration
  8. TRULIA CHOSE TOCONVERT THEIR SRPMainly because it was already on the agenda for a redesign
  9. REAL USERMEASUREMENTS (RUM)What matters to you?
  10. THEIR NEW HTML IS 48%SMALLER
  11. 21% FASTER LOAD TIME
  12. 60% FASTER TIME TOFIRST BYTE
  13. THEY REDUCED UNUSEDCSS BY 135KB
  14. SRP PAGE VIEWS UP 11%
  15. PDP PAGE VIEWS UP 3%
  16. TRULIA ALSO CARESABOUT...Click throughs, leads, customer satisfaction, and filter use. All ofthose metrics also improved.
  17. SO WHAT DOES THATHAVE TO DO WITH ASTYLE GUIDE?
  18. 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
  19. A STYLE GUIDE CAN HELP
  20. WHAT WE WANT IS THIS...
  21. BUT WHAT WE HAVE ISTHIS...styles duplicated over and over
  22. ANALYZING DUPLICATIONGrep | CSS Lint | CSSCSS
  23. 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
  24. grep -r font-size . | wc -lrecursively current directorysend results count the lines
  25. TRULIA DETAILSh1-h6 564font-size 2267margin 3993padding 4493padding: 0 1214margin: 0 1019Lots of room for improvement!
  26. TRULIA DETAILS!important 495color 3920hex 6464#fff 1297total rules 16,225background 4888Unused CSS (home page) 186kb or 74%Lots of room for improvement!
  27. ANALYZING DESIGNINCONSISTENCYDESIGN INCONSISTENCY
  28. DEMO TYPOGRAPHY TOOL
  29. USE HEURISTICS ANDCOMMON SENSETo reduce the total number of styles
  30. BUTTONS
  31. FOR EACH COMPONENT,THREE OPTIONS:Build!Replace{123 Redesign
  32. DO THIS FOR ALLCOMPONENT TYPES...Try to find as many variations as you can
  33. DEMO THE STYLE GUIDE
  34. HOW DO WE BUILD ACOMPONENT?
  35. COMPONENT STRUCTUREKeep component files self-contained
  36. WE KEEP ALLCOMPONENTSTOGETHERIndependent of the appsviews
  37. CREATE SMALL FILES❖ Less merge conflicts❖ Easier to include/exclude acomponent
  38. SOME COMPONENTSHAVE ASSOCIATED JS❖ We keep all the parts of acomponent together❖ Scripts, Sass, docs, partials,skins, and init functionality
  39. 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
  40. WE’LL FOCUS ON THESASSYou are probably comfortable with templating, watchers, buildprocesses, so we’ll focus on building our styles effectively.
  41. the ubiquitous gray boxLET’S MAKE A GRAYROUNDED CORNER BOX
  42. MY BOX NEEDS CLEARFIXso let’s create a mixin and see how it affects the output.@include
  43. 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:
  44. PROPERTY VALUE PAIRSARE COPIED:.myCoolThing  {    overflow:hidden;      *overflow:visible;      zoom:1;}Becomes:
  45. 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;}
  46. NEXT, I TRIED TOMAKE TABSIn the OOCSS world, tabs are just a fancy kind of box.
  47. HERE, WE TELL SASS TABSARE A BOX:
  48. HERE, WE TELL SASS TABSARE A BOX:
  49. OMG! OUTPUT IS BAD!
  50. OMG! OUTPUT IS BAD!notice line numbers and file name
  51. OH SO TEMPTING...to make the SASS nesting match the html nesting!It feels so good!
  52. THE INCEPTION RULE:Never go more than three levels deep
  53. SO HOW DO WE USE SASSand also have good architecture?
  54. BUILD SIMPLECOMPONENTS FIRSTas they often get used in complex ones
  55. VARIABLES
  56. VARIABLES
  57. TYPOGRAPHY
  58. TYPOGRAPHY
  59. HARD TO CALCULATE?CREATE HELPERS@mobywhale
  60. EASY TO SEE WHAT THESEVARIABLES DO
  61. LISTS
  62. LINKS
  63. A HANDLEBARS FILE PERCOMPONENT
  64. 3 LAYOUT MECHANISMS
  65. GRIDS
  66. GRIDS VARIABLES
  67. MEDIA BLOCK
  68. INLINE LIST
  69. 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
  70. 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!
  71. GET THE CODE:https://github.com/stubbornella/oocss
  72. THANK YOU!@stubbornellahttps://github.com/stubbornella/oocss

×