Utilizing the Specificity of :the place() as a CSS Reset

No Comments

I don’t find out about you, however I write these three declarations many occasions in my CSS:

ul {
padding: 0;
margin: 0;
list-style-type: none;
}

You would possibly yell at me and say I can simply put these in my CSS resets. I want I may, however I don‘t need to and I’ll let you know why in a second.

Person brokers set values to these properties in a listing for a objective, and that’s to make lists extra readable. These are the default kinds in chromium browsers for a <ul> component:

ul {
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}

So, with out including any class in HTML or fashion in CSS, we get these without cost. That‘s a pleasant factor and I don‘t need to lose it. However I might recognize it if I may make the browser perceive that there’s very excessive probability I don’t need that default characteristic in circumstances the place I add a category to the component.

So here’s a fast answer to reset a <ul> component that has a category:

ul[class] {
padding: 0;
margin: 0;
list-style-type: none;
}

Now I don’t lose the default fashion besides after I add a category to my <ul> component.

The issue

There’s a downside with this answer. Think about there’s a listing that we need to have a unique list-style-type for it, like the next:

ul[class] {
padding: 0;
margin: 0;
list-style-type: none;
}

.listing {
list-style-type: sq.;
}

This doesn’t work since ul[class] has greater specificity. That’s the place our answer breaks down.

We may add extra weight to the selector’s specificity:

ul.listing {
list-style-type: sq.; /* Specificity: 0, 1, 1 */
}

/* or */

.sidebar .listing {
list-style-type: sq.; /* Specificity: 0, 2, 0 */
}

In case you are OK including extra weight to the selector, you might be good to go. However I’m not OK with it, personally. For instance, I don’t need to put the component’s identify in my CSS many of the occasions resulting from a separation of considerations precept. Or, if you’re following BEM methodology, issues will most definitely come up as this conflicts with it.

So what can we do?

The answer

A number of months in the past, I realized about some scorching selectors, together with :is() and :the place(). One factor about these two purposeful pseudo selectors, is that they will change specificity, giving us the ability to nullify or improve that specificity.

The important thing about :the place() is that it at all times has 0 specificity. So we will eliminate our downside very simply like this:

:the place(ul[class]) {
list-style: none;
}

.listing {
list-style: sq.; /* Now this works like a attraction! */
}

With the ability of this selector, libraries can provide us fashion with no specificity. So there could be no specificity to compete with after we as authors write CSS.

Demo

Within the following demo, you may take away :the place() to see what we talked about in motion:

CodePen Embed Fallback

The put up Utilizing the Specificity of :the place() as a CSS Reset appeared first on CSS-Tips. You’ll be able to help CSS-Tips 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