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

GitHub's CSS Performance

Jon Rohan
December 05, 2012

GitHub's CSS Performance

A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. I recorded the presentation from my laptop and posted it here https://vimeo.com/54990931

Jon Rohan

December 05, 2012
Tweet

More Decks by Jon Rohan

Other Decks in Programming

Transcript

  1. Th talk  abt Pfmce probms  GHub How 

    ce ft C  HTML C/HTML ols  GHub
  2.                    

                       {    width:  30px; } 1 2 3 .small.private.icon
  3.                    

                       {    width:  30px; } 1 2 3 .small-­‐private-­‐icon
  4.                  {  

     width:  30px; } 1 2 3 .foo.bar Iex  m_classRules u  key .foo
  5.                  {  

     width:  30px; } 1 2 3 .bar.foo Iex  m_classRules u  key .bar
  6.                    

                             {    width:  30px; } 1 2 3 input[type=text].error Iex  m_tagRules
  7.                    

                             {    width:  30px; } 1 2 3 input.error[type=text] Iex  m_classRules
  8.                  {  

     width:  30px; } 1 2 3 .bar#foo Iex  m_classRules
  9.                  {  

     width:  30px; } 1 2 3 #foo.bar Iex  m_idRules
  10. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"

     href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8
  11. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"

     href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8
  12. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"

     href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8 <pre>+  this  is  a  line  in  the  diff</pre>
  13. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"

     href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8
  14. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"

     href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8 <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td> <td  id="L1R7"  class="line_number  linkable-­‐line-­‐numbers">7</td>
  15. <tr>    <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td>    <td  id="L1R7"  class="line_number

     linkable-­‐line-­‐numbers">7</td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8
  16. <tr>    <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td>    <td  id="L1R7"  class="line_number

     linkable-­‐line-­‐numbers">7</td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8 <b  class="add-­‐bubble"></b>
  17. January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  18. January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  19. January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  20. button.classy,  a.button.classy, button.classy:disabled:hover,  a.button.classy.disabled:hover  {    border-­‐radius:  3px;    &.primary

     {        color:  #fff;        &:hover  {  border-­‐color:  #4a993e;  }        &.mousedown  {  border-­‐bottom-­‐color:  darken(#8add6d,  10%);  }        &:disabled,  &.disabled  {            &,  &:hover  {                border-­‐color:  #74bb5a;            }        }    } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  21. “Think of it like SQL EXPLAIN, but for CSS selectors.”

    - https://github.com/josh/css-explain
  22. >  cssExplain("li  .item") {    "selector":  "li  .item",    "parts":

     ["li",  ".item"],    "specificity":  [0,  1,  1],    "category":  "class",    "key":  "item",    "score":  6 }