Here are some examples of what CSS rules we mark as used. We mark a CSS rule as used if we find it used in any page where it is correctly used.

Simple CSS Selectors

HTML: 
        
          <div class="red">Red Text</div>
          <span id="green">Green Text</span>
CSS: 
        
          /* Used */
          .red {
            color: #F00;
          }

          /* Used */
          #green {
            color: #0F0;
          }

          /* Used */
          div, span {
            font-weight: bold;
          }

          /* Not used */
          .blue {
            color: #00F;
          }

Combinator Selectors

HTML: 
        
          <body>
            <div class="red-spans">
              <span id="first">Red Text</span>
              <span>Red Text</span>
              <span>Red Text</span>
            </div>
          </body>
CSS: 
        
          /* Used */
          body div.red-spans > span {
            color: #F00;
          }

          /* Used */
          #first + span {
            font-weight: bold;
          }

          /* Used */
          #first ~ span {
            font-weight: bold;
          }

Pseudo Classes And Elements

HTML: 
        
          <div>
            <a href="#"></a>
          </div>
CSS: 
        
          /* Used */
          a:hover {
            color: purple;
          }

          /* Used */
          a::after {
            content: "!"
          }

          /* Not used */
          div p:last-child {
            color: green;
          }

Attribute Selectors

HTML: 
        
          <div>
            <a target="_blank" href="http://example.com"></a>
          </div>
CSS: 
        
          /* Used */
          a[target="_blank"] {
            color: purple;
          }

          /* Used */
          a[href^="http:"] {
            font-weight: bold;
          }

Media Queries

We assume that all media query conditions could be true at some point.

HTML: 
        
          <div>
            <span>Some text</span>
          </div>
CSS: 
        
          @media screen and (min-width: 500px) {
            /* Used */
            span {
              color: red;
            }
          }

          /* Empty media blocks get removed */
          @media screen and (min-width: 500px) {
            /* Not used */
            a {
              color: blue;
            }
          }

JavaScript Scanning

Here are some examples of how we discover CSS classes in JavaScript files.

HTML: 

        
          <div>
            <span id="foo">
               <a href="#">Some text<a>
            </span>
          </div>

          <div id="message">
          </div>
JavaScript: 
        
          var foo = document.getElementById('foo');
          foo.classList.add('bar');

          var base = 'text-';
          if (test1) {
            foo.classList.add(base + 'red');
          } else {
            foo.classList.add(base + 'blue');
          }

          document.getElementById('message').innerHTML =
            `<span class="message-text big">
              Message
            </span>`;
CSS: 
        
          /* Used: '.bar' added by JavaScript */
          div .bar a {
            font-weight: bold;
          }

          /* Used: 'text-' and 'red' both added by JavaScript */
          .text-red {
            color: red;
          }

          /* Used: 'message-text' added by JavaScript */
          .message-text {
            font-weight: bold;
          }
Want to see how much CSS you're wasting? and find out!
Not sure if we'll correctly discover your used CSS? Try it for free first, or get in touch and we'll answer your questions.
$(function() { });