Die Spezifität ist eine der grundlegenden Techniken von CSS, macht aber immer wieder Probleme. Es sind nicht nur Verständnisprobleme. Die Nutzung von Präprozessoren wie Sass kann auch zu unnötig tiefen Verschachtelungen führen. Jede Verschachtelungsebene erhöht die Spezifität.
Aktuell überarbeite ich ein paar CSS-Dateien und muss gewährleisten, dass meine Vereinfachungen im Code nicht zu ungewünschten Nebenwirkungen führen. Leider sind die CSS-Dateien nicht nach meinen Prinzipien der modularen Webentwicklung entstanden, das würde einiges erleichtern. Deshalb musste ich jetzt phasenweise in die Trickkiste greifen.
Es gibt im Code drei Arten von figure, aber leider nur zwei Modifikatorenklassen. Eine für Video, eine für Audio. Wenn ich also das figure-Element mit dem Bild als Inhalt greifen will, muss ich ein glücklicherweise existierendes Attribut in den Selektor mit aufnehmen: figure.asset[itemprop="image"]. Das Ergebnis ist eine Spezifität von 021.
Wenn ich nun in einem anderen Stylesheet .el figure schreibt, komme ich nur auf eine Spezifität von 011. Für viele wäre jetzt der Zeitpunkt von !important gekommen. Oder aber doch wieder das DOM mehr abbilden und eine Ebene vorher nutzen? Beides ist doof. Stattdessen nutze ich einen Trick, der ohne Nebenwirkungen ist: ich verknüpfe die Klasse mit sich selbst. Das kann ich recht oft tun.
Das sieht dann so aus: .el.el figure.
Das Ergebnis ist auch hier eine Spezifität von 021. Und um auf Nummer Sicher zu gehen schreibe ich am Besten .el.el.el figure, dann sind es 031 und es ist zusätzlich egal, in welcher Reihenfolge der Kaskade der Code erscheint.
Die Lösung sieht evtl. nicht elegant aus, hat aber keine Nebenwirkung und vermeidet !important.