Ich versuche zu lernen, effizienteres CSS zu schreiben, insbesondere, weil ich mit einer ziemlich komplexen Website arbeite, die schnell gerendert werden muss.

Ich bin es gewohnt, viel davon in meinem HTML / CSS zu haben (hauptsächlich, weil ich die Lesbarkeit mag):

.spotlight {}
.spotlight ul {}
.spotlight ul li {}
.spotlight ul li a {color: #333;}

<div class="spotlight">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

Ich verstehe jetzt, dass Browser den CSS-Regelvergleichsprozess von rechts nach links ausführen, was bedeutet, dass die<a> Das Element in der letzten CSS-Regel oben würde zuerst mit jedem Link auf der Seite übereinstimmen, was zu einem Leistungsverlust führen würde.

Soweit ich weiß, ist die browserfreundliche Lösung spezifischer und verwendet zum Beispiel:

.spotlight {}
.spotlight-link {color: #333;}

    <div class="spotlight">
      <ul>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
      </ul>
    </div>

(Vorausgesetzt, ich verwende Vererbung, wo dies möglich ist, benötige aber häufig noch eine spezifische Kontrolle über das letzte Element in der Struktur)

Was mich zweifeln lässt, ist: Negiert nicht das zusätzliche HTML-Aufblähen beim Drucken von Klassennamen auf Elemente auf der Seite die Leistungsverbesserungen, die durch das Vermeiden verschachtelter CSS-Child-Selektoren erzielt werden? Ich bin es gewohnt, weniger HTML zu schreiben, und das widerspricht dem. Jede Einsicht wäre dankbar.