CSS :is
There are scores of developers who hate CSS; don't get it, don't want to get it, etc. Most of that is either down to inefficiencies within the language or misunderstanding of how to properly construct a website structure. I mostly love CSS but there are some parts of the language that I always hated, like having to repeat very similar selectors. That's why I was so happy when I saw CSS :is ; a method of avoid duplication within your selector structure!
You all remember this mindless CSS repetition:
section h1,
section h2,
section h3,
article h1,
article h2,
article h3 {
/* styles here */
}
I always loathed having to do that -- lots of maintenance cost and bloated CSS files. This is where :is comes to the rescue:
:is(section, article) :is(h1, h2, h3) {
/* styles here */
}
is: is a perfect summary of how a tiny addition to the CSS language can make a developer's life just a bit easier!
There is two important facts about
:is():-1. If one/more selectors passed in it, are invalid then parser will still parse the entire code and apply the mentioned styles to other selectors except the invalid ones.
2. It does not work with pseudo elements.