Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass at GitHub

Aeb22e809b34e9c8a5623ba6c4738a63?s=47 Ben Bleikamp
October 12, 2013

Sass at GitHub

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

Aeb22e809b34e9c8a5623ba6c4738a63?s=128

Ben Bleikamp

October 12, 2013
Tweet

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

  26. None
  27. None
  28. Team mentions

  29. Stop writing new CSS

  30. The Styleguide

  31. None
  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
  37. None
  38. We’re picky about code, too

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

  40. None
  41. We hate ⌘C, ⌘V

  42. GitHub and Gist look very similar

  43. None
  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

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

  73. None
  74. Timeline Chrome Developer Tools

  75. None
  76. None
  77. Audits Chrome Developer Tools

  78. None
  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

  85. None
  86. Watching for problems

  87. None
  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)