You need enabling CSS selectors, not disabling ones

No Comments

I feel that is good recommendation from Silvestar Bistrović:

An enabling selector is what I name a selector that does a job with out disabling the actual rule.

The basic instance is making use of margin to every thing, solely to should take away it from the ultimate aspect as a result of it provides house in a spot you don’t need.

.card {
margin-bottom: 1rem;
}

/* Wait however not on the final one!! */
.parent-of-cards :last-child {
margin-bottom: 0;
}

You may also do…

/* “Disabling” rule */
.card:last-child {
margin-bottom: 0;
}

However that’s perhaps not as contextual as deciding on from the mother or father.

One other variation is:

.card:not(:last-of-child) {
margin-bottom: 1rem;
}

That’s what Silvestar refers to as “enabling” since you’re solely ever making use of this rule — not making use of it after which eradicating it with one other selector later. I agree that’s more durable to know and error-prone.

One more instance is a scoped model of Lobotomized Owls:

/* Solely house them out in the event that they stack */
.card + .card {
margin-top: 1rem;
}

I feel hole is the place that is all headed in the long run. Put the onus on the mother or father, not the kid, and hold it an enabling selector:

.parent-of-cards {
show: grid;
hole: 1rem;
}

Direct Hyperlink to ArticlePermalink

The publish You need enabling CSS selectors, not disabling ones appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment