Quiere habilitar selectores CSS, no deshabilitarlos | Programar Plus

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 →

(Visited 3 times, 1 visits today)