Sass at GitHub

My talk from SassConf on October 12, 2013 in New York City.

Transcript

1. Sass at GitHub
   !
   

   View Slide

2. - Probably a few people at GitHub sometime in 2012
   “We should check out Sass.”
   

   View Slide

3. Today:
   

   View Slide

4. 75 people have made a commit in
   /stylesheets on github/github
   

   View Slide

5. …but only 14 are “experts”
   

   View Slide

6. Over 6,000 different selectors
   

   View Slide

7. Over 6,000 different selectors
   (thanks, Internet Explorer)
   

   View Slide

8. 133 .scss files
   

   View Slide

9. We’ve made mistakes along the way
   

   View Slide

10. I’m Ben Bleikamp
    

    View Slide

11. @bleikamp
    

    View Slide

12. @bleikamp
    !
    

    View Slide

13. The stack
    

    View Slide

14. Rails “2.3”
    

    View Slide

15. Rails “2.3”
    HTML ERB + View Models
    

    View Slide

16. Rails “2.3”
    HTML ERB + View Models
    CoffeeScript
    

    View Slide

17. Rails “2.3”
    HTML ERB + View Models
    CoffeeScript
    Sass (SCSS)
    

    View Slide

18. Avoiding mistakes
    

    View Slide

19. 75 people touched a stylesheet
    

    View Slide

20. So we wrote a CSS testing framework
    

    View Slide

21. JK
    

    View Slide

22. We use tools available to everyone
    

    View Slide

23. Mistakes happen
    

    View Slide

24. Mistakes happen, limit them
    

    View Slide

25. Make problems visible
    

    View Slide

26. View Slide

27. View Slide

28. Team mentions
    

    View Slide

29. Stop writing new CSS
    

    View Slide

30. The Styleguide
    

    View Slide

31. View Slide

32. KSS github.com/kneath/kss
    A methodology for documenting CSS and generating styleguides.
    

    View Slide

33. // A bubble is the basic container for a section of
    // content in a mobile layout. The content in a bubble
    // should be related and pages usually have multiple
    // bubbles.
    //
    // .no-padding - Remove padding from a bubble
    //
    // Styleguide 1.1
    

    View Slide

34. // A bubble is the basic container for a section of
    // content in a mobile layout. The content in a bubble
    // should be related and pages usually have multiple
    // bubbles.
    //
    // .no-padding - Remove padding from a bubble
    //
    // Styleguide 1.1
    Explanation
    

    View Slide

35. // A bubble is the basic container for a section of
    // content in a mobile layout. The content in a bubble
    // should be related and pages usually have multiple
    // bubbles.
    //
    // .no-padding - Remove padding from a bubble
    //
    // Styleguide 1.1
    Explanation
    Modifiers
    

    View Slide

36. // A bubble is the basic container for a section of
    // content in a mobile layout. The content in a bubble
    // should be related and pages usually have multiple
    // bubbles.
    //
    // .no-padding - Remove padding from a bubble
    //
    // Styleguide 1.1
    Explanation
    Modifiers
    Reference
    

    View Slide

37. View Slide

38. We’re picky about code, too
    

    View Slide

39. We tell people what we expect in
    in their commits
    

    View Slide

40. View Slide

41. We hate ⌘C, ⌘V
    

    View Slide

42. GitHub and Gist look very similar
    

    View Slide

43. View Slide

44. ⌘C, ⌘V
    

    View Slide

45. Build something new on GitHub
    

    View Slide

46. Build something new on GitHub
    Document it
    

    View Slide

47. Build something new on GitHub
    Document it
    Primer & Styleguide
    

    View Slide

48. Primer?
    

    View Slide

49. Primer is shared styles
    

    View Slide

50. Components
    

    View Slide

51. Mix-ins & variables
    

    View Slide

52. “Speed is the second biggest engagement
    driver on the Internet. Just after
    perceived speed.”
    — @maccaw
    

    View Slide

53. Jon Rohan
    CSS Performance Savant
    @jonrohan
    

    View Slide

54. Diff pages
    

    View Slide

55. Average diff =
    9,000 lines of HTML across all files
    

    View Slide

56. That’s a lot of opportunities for
    bad markup
    

    View Slide

57. …and redrawing
    

    View Slide

58. Hiding & showing with display: none; or
    visibility: hidden;
    

    View Slide

59. CSS animations
    

    View Slide

60. User actions
    

    View Slide

61. The fewer DOM matches there are,
    the faster the site loads
    

    View Slide

62. Some CSS… snafoos?
    

    View Slide

63. Overqualifying selectors
    ul#nav
    

    View Slide

64. Overqualifying selectors
    #nav
    

    View Slide

65. Chaining selectors
    .octicon.mini.private
    

    View Slide

66. Chaining selectors
    .octicon-private
    

    View Slide

67. Attribute selectors
    [class^=“octicon-”]
    

    View Slide

68. Catching these pesky CSS
    performance problems
    

    View Slide

69. Graphite
    Scalable Realtime Graphing
    

    View Slide

70. View Slide

71. View Slide

72. CSS Explain github.com/josh/css-explain
    SQL EXPLAIN for CSS selectors
    

    View Slide

73. View Slide

74. Timeline
    Chrome Developer Tools
    

    View Slide

75. View Slide

76. View Slide

77. Audits
    Chrome Developer Tools
    

    View Slide

78. View Slide

79. We use the things we build
    

    View Slide

80. Making things work on
    a phone
    

    View Slide

81. It’s responsive fast
    

    View Slide

82. Re-write HTML and CSS specifically
    for mobile
    

    View Slide

83. (Almost) no JavaScript
    

    View Slide

84. No CSS animations
    

    View Slide

85. View Slide

86. Watching for problems
    

    View Slide

87. View Slide

88. This talk isn’t really advice
    

    View Slide

89. Keep things simple
    

    View Slide

90. Write less code
    

    View Slide

91. Measure everything
    

    View Slide

92. Thank you.
    (I’ll tweet a link to these slides from @bleikamp)
    

    View Slide