If you’ve been using CSS for over a decade like me(Woah!), there are some old traditional best practices you’ve grown accustomed to that may no longer be needed. Like with anything, what was once the best way will soon become the old-fashioned problematic way. Just the way life goes.
Today, I wanted to take a look at how :is() has replaced an old-school best practice.
In the past, there was a straightforward approach to applying general styling across multiple HTML entities. Let’s look at an example.
.bold,
strong,
b {
font-weight: 600;
}
.bold i,
strong i,
b i {
font-style: italic;
}Good, clean code right! In the past, yes, but today is not the best approach. That is where :is() comes into play. This CSS util cleans up the code above into a much more manageable declaration.
:is(.bold, strong, b) {
font-weight: 600;
}
:is(.bold, strong, b) i {
font-style: italic;
}Just looking at these two code blocks is like night and day. The first one is doable, but very much prone to be difficult to manage as it grows and gets more diverse. In contrast, the one on the bottom is much simpler, straight to the point, and maintainable at every level of declaration depth.
Hopefully, you learned something new, or refreshed your knowledge on this operator!