You want enabling CSS selectors, not disabling ones

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 …


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.

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-of-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 ArticlePermalink


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.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-28T19:47:06+00:00) » You want enabling CSS selectors, not disabling ones. Retrieved from https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/.
MLA
" » You want enabling CSS selectors, not disabling ones." Chris Coyier | Sciencx - Tuesday August 31, 2021, https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/
HARVARD
Chris Coyier | Sciencx Tuesday August 31, 2021 » You want enabling CSS selectors, not disabling ones., viewed 2024-03-28T19:47:06+00:00,<https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/>
VANCOUVER
Chris Coyier | Sciencx - » You want enabling CSS selectors, not disabling ones. [Internet]. [Accessed 2024-03-28T19:47:06+00:00]. Available from: https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/
CHICAGO
" » You want enabling CSS selectors, not disabling ones." Chris Coyier | Sciencx - Accessed 2024-03-28T19:47:06+00:00. https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/
IEEE
" » You want enabling CSS selectors, not disabling ones." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/. [Accessed: 2024-03-28T19:47:06+00:00]
rf:citation
» You want enabling CSS selectors, not disabling ones | Chris Coyier | Sciencx | https://www.scien.cx/2021/08/31/you-want-enabling-css-selectors-not-disabling-ones/ | 2024-03-28T19:47:06+00:00
https://github.com/addpipe/simple-recorderjs-demo