Z tego co wyczytałem klasy są szybsze niż te wszystkie img, a, li itp... więc jakie rozwiązanie będzie bardziej wydajne.

[HTML] pobierz, plaintext 
<div class="comment-avatar">
<img class="comment-avatar-image" src="link.jpg">
</div>
 
<div class="comment-text">
<a class="comment-text-link" href="link">Super User</a>
</div>
[HTML] pobierz, plaintext 

[XML] pobierz, plaintext 
.comment-avatar img {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 100%;
}
.comment-text a{
   color: red;
}
[XML] pobierz, plaintext 

Czy lepiej będzie tak

[XML] pobierz, plaintext 
.comment-avatar-image {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 100%;
}
.comment-text-link{
   color: red;
}
[XML] pobierz, plaintext 

Naprawdę myślisz że przy obecnym poziomie przeglądarek i procesorów ma to znaczenie? Sądzę że obiło ci się to o uszy w kontekście jquery i sizzle https://learn.jquery.com/performance/optimize-selectors/