Creo que este es un buen consejo de Silvestar Bistrović:
Un selector de habilitación es lo que yo llamo un selector que hace un trabajo sin deshabilitar la regla en particular.
El ejemplo clásico es aplicar margin a todo, solo para tener que eliminarlo del elemento final porque agrega espacio en un lugar que no desea.
.card {
margin-bottom: 1rem;
}
/* Wait but not on the last one!! */
.parent-of-cards :last-child {
margin-bottom: 0;
}También podrías hacer …
/* "Disabling" rule */
.card:last-child {
margin-bottom: 0;
}Pero eso quizás no sea tan contextual como seleccionar del padre.
Otra variante es:
.card:not(:last-child) {
margin-bottom: 1rem;
}Eso es a lo que Silvestar se refiere como “habilitar” porque solo está aplicando esta regla, no aplicándola y luego eliminándola con otro selector. Estoy de acuerdo en que es más difícil de entender y propenso a errores.
Otro ejemplo más es una versión con alcance de Lobotomized Owls:
/* Only space them out if they stack */
.card + .card {
margin-top: 1rem;
}creo gap es hacia donde se dirige todo esto a largo plazo. Ponga la responsabilidad en el padre, no en el hijo, y manténgalo como selector habilitante:
.parent-of-cards {
display: grid;
gap: 1rem;
}Enlace directo →