CodePen

HTML

            
              <article id="article">
  <div class="long complicated class name list that scores really high foo">article</div>
</article>
<footer id="footer">
  <div class="long complicated class name list that scores really high foo">footer</div>
</footer>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .long.complicated.class.name.list.that.scores.really.high.foo {
  background-color: red;
}

/* Even after a long list classes, the ID footer easily
   overrides anything else.
    
   Only an ID or !important flag will work in this instance.
   IMO an ID is the more elegant solution here.
*/
#footer .foo {
  background-color: blue;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................