Ich denke, das ist ein guter Rat von Silvestar Bistrović
Ein aktivierender Selektor ist das, was ich einen Selektor nenne, der eine Aufgabe erfüllt, ohne die betreffende Regel zu deaktivieren.
Das klassische Beispiel ist das Anwenden von margin auf alles, nur um es dann vom letzten Element wieder entfernen zu müssen, weil es Platz an einer Stelle hinzufügt, an der du ihn nicht möchtest.
.card {
margin-bottom: 1rem;
}
/* Wait but not on the last one!! */
.parent-of-cards :last-child {
margin-bottom: 0;
}Du könntest auch Folgendes tun...
/* "Disabling" rule */
.card:last-child {
margin-bottom: 0;
}Aber das ist vielleicht nicht so kontextbezogen wie die Auswahl vom Elternelement aus.
Eine weitere Variante ist
.card:not(:last-child) {
margin-bottom: 1rem;
}Das ist es, wasSilvestar als „aktivierend“ bezeichnet, weil du diese Regel immer nur anwendest – sie nicht anwendest und dann mit einem anderen Selektor später wieder entfernst. Ich stimme zu, das ist schwerer zu verstehen und fehleranfälliger.
Noch ein Beispiel ist eine eingegrenzte Version von Lobotomized Owls
/* Only space them out if they stack */
.card + .card {
margin-top: 1rem;
}Ich denke, gap ist das, worauf das alles langfristig hinausläuft. Lege die Verantwortung auf das Elternelement, nicht auf das Kindelement, und behalte es als aktivierenden Selektor bei
.parent-of-cards {
display: grid;
gap: 1rem;
}
Ich liebe es persönlich, diesen Selektor
* + .cardzu verwenden. Das Schöne am Sternchen ist, dass es die Spezifität nicht erhöht.Ich stimme zu. Ich habe diese Art von Selektor bei meinen Code-Reviews gesehen und sie wegen des Spezifitätsproblems abgelehnt.
Obwohl mir die Idee von aktivierend vs. deaktivierend gefällt, könnte ich der Implementierung nicht mehr widersprechen.
Meine persönliche Vorliebe ist Lesbarkeit und der Code, der deaktiviert, ist explizit, er tut genau das, was er sagt. Der andere erfordert einige Überlegungen, um ihn zu verstehen. Stell dir jetzt vor, du kombinierst einige davon oder musst den Code eines anderen Entwicklers pflegen.
Besonders mit :not wird die Erweiterung des Selektors ziemlich frustrierend, aber in Wirklichkeit musst du es tun. Wenn ich einen Selektor betrachte, der alles außer dem ersten und letzten Element ansteuert, macht mich das nicht glücklich.
Gute Idee. Hier ist ein weiterer Aktivierer
.parent-of-cards > * + * {margin-top: 1rem}