title: Apply style to multiple selectors or use multiple classes. Which has better performance?
body: <p>I'm using SASS but actually my question applies also to plain old CSS.
  So I have this class:</p>
  
  <pre><code>.some-icon {
      background-image: url('data:image/png;base64, someBase64String');
  }
  </code></pre>
  
  <p>So, now I have to use this icon at several places. I also need to write some additional css to place it correctly at the different places where it should appear. Since I don't want to duplicate this huge base64 string I'wonder which approach to use.</p>
  
  <p>Either use <code>SASS</code>'s extend syntax:</p>
  
  <pre><code>.use-case-a{
      @extend .some-icon;
      margin: 10px 0 0 0;
      ...
  }
  </code></pre>
  
  <p>The compiled css would look like this:</p>
  
  <pre><code> .some-icon, .use-case-a {
      background-image: url('data:image/png;base64, someBase64String');
  }
  
  .use-case-a{
      margin: 10px 0 0 0;
      ...
  }
  </code></pre>
  
  <p>Or should I just write:</p>
  
  <pre><code> .some-icon {
      background-image: url('data:image/png;base64, someBase64String');
  }
  
  .use-case-a{
      margin: 10px 0 0 0;
      ...
  }
  </code></pre>
  
  <p>And then apply both classes <code>some-icon</code> and <code>use-case-a</code> on it?</p>
  
  <p>I read that the first approach can drain performance:
  <a href="https://github.com/nex3/sass/issues/12" rel="nofollow">https://github.com/nex3/sass/issues/12</a></p>
  
  <p>But I also read that applying multiple classes hurt performance, too.</p>
  
  <p>What is the recommended practice here?</p>