Sass at GitHub

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

Transcript

1. Sass at GitHub !
2. - Probably a few people at GitHub sometime in 2012 “We should check out Sass.”
3. Today:
4. 75 people have made a commit in /stylesheets on github/github
5. …but only 14 are “experts”
6. Over 6,000 different selectors
7. Over 6,000 different selectors (thanks, Internet Explorer)
8. 133 .scss files
9. We’ve made mistakes along the way
10. I’m Ben Bleikamp
11. @bleikamp
12. @bleikamp !
13. The stack
14. Rails “2.3”
15. Rails “2.3” HTML ERB + View Models
16. Rails “2.3” HTML ERB + View Models CoffeeScript
17. Rails “2.3” HTML ERB + View Models CoffeeScript Sass (SCSS)
18. Avoiding mistakes
19. 75 people touched a stylesheet
20. So we wrote a CSS testing framework
21. JK
22. We use tools available to everyone
23. Mistakes happen
24. Mistakes happen, limit them
25. Make problems visible
28. Team mentions
29. Stop writing new CSS
30. The Styleguide
32. KSS github.com/kneath/kss A methodology for documenting CSS and generating styleguides.
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
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
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
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
38. We’re picky about code, too
39. We tell people what we expect in in their commits
41. We hate ⌘C, ⌘V
42. GitHub and Gist look very similar
44. ⌘C, ⌘V
45. Build something new on GitHub
46. Build something new on GitHub Document it
47. Build something new on GitHub Document it Primer & Styleguide
48. Primer?
49. Primer is shared styles
50. Components
51. Mix-ins & variables
52. “Speed is the second biggest engagement driver on the Internet. Just after perceived speed.” — @maccaw
53. Jon Rohan CSS Performance Savant @jonrohan
54. Diff pages
55. Average diff = 9,000 lines of HTML across all files
56. That’s a lot of opportunities for bad markup
57. …and redrawing
58. Hiding & showing with display: none; or visibility: hidden;
59. CSS animations
60. User actions
61. The fewer DOM matches there are, the faster the site loads
62. Some CSS… snafoos?
63. Overqualifying selectors ul#nav
64. Overqualifying selectors #nav
65. Chaining selectors .octicon.mini.private
66. Chaining selectors .octicon-private
67. Attribute selectors [class^=“octicon-”]
68. Catching these pesky CSS performance problems
69. Graphite Scalable Realtime Graphing
72. CSS Explain github.com/josh/css-explain SQL EXPLAIN for CSS selectors
74. Timeline Chrome Developer Tools
77. Audits Chrome Developer Tools
79. We use the things we build
80. Making things work on a phone
81. It’s responsive fast
82. Re-write HTML and CSS specifically for mobile
83. (Almost) no JavaScript
84. No CSS animations
86. Watching for problems
88. This talk isn’t really advice
89. Keep things simple
90. Write less code
91. Measure everything
92. Thank you. (I’ll tweet a link to these slides from @bleikamp)