I think this is good advice from Silvestar Bistrović:
An enabling selector is what I call a selector that does a job without disabling the particular rule.
The classic example is applying margin to everything, only to have to remove it from the final element because it adds space in a place you don’t want.
.card {
margin-bottom: 1rem;
}
/* Wait but not on the last one!! */
.parent-of-cards :last-child {
margin-bottom: 0;
}You might also do…
/* "Disabling" rule */
.card:last-child {
margin-bottom: 0;
}But that’s maybe not as contextual as selecting from the parent.
Another variation is:
.card:not(:last-child) {
margin-bottom: 1rem;
}That’s what Silvestar refers to as “enabling” because you’re only ever applying this rule — not applying it and then removing it with another selector later. I agree that’s harder to understand and error-prone.
Yet another example is a scoped version of Lobotomized Owls:
/* Only space them out if they stack */
.card + .card {
margin-top: 1rem;
}I think gap is where this is all headed in the long term. Put the onus on the parent, not the child, and keep it an enabling selector:
.parent-of-cards {
display: grid;
gap: 1rem;
}Direct Link to Article — Permalink
The post You want enabling CSS selectors, not disabling ones appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
