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

Sass at GitHub

Ben Bleikamp
October 12, 2013

Sass at GitHub

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

Ben Bleikamp

October 12, 2013
Tweet

More Decks by Ben Bleikamp

Other Decks in Design

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