In CSS, is performance increased by using the :is() pseudo-class?

Question

Are current releases (mid-2023) of web browser engines (Gecko, WebKit, Blink for Firefox, Safari, Chromium web browsers) smart enough to realize that they can internally gain efficiency by combining together CSS code such as the following?

foo baz {
  color: #000;
}
bar baz {
  color: #000;
}
foo boo {
  color: #000;
}
bar boo {
  color: #000;
}

Or does it lead to better performance to write the above CSS code as follows?

:is(foo, bar) :is(baz, boo) {
  color: #000;
}

Answer 1

You really shouldn't not worry about performance while you are using CSS, because there are no obvious way (and need) to optimize it. What can you do is to use minifiers for CSS to reduce the size of file (if it is big) to reduce the page load time, but, again, think twice do you really need it and do you have problems with performance in your code now. If not, you have nothing to worry about. Otherwise you should refactor and optimize the places, which could cause unwanted time delays (as a JavaScript code, especially if it contains loops in loops and AJAX/Socket requests, or as a backend with lots of queries to database per one AJAX/Socket request), and the CSS almost always is not this place (of course, you can use superset of CSS which supports loops or use really lots of animations (hundreds of them) and in case you really want to slow down your code with current tool, you could obtain this behaviour, but it is challenging task and literally impossible in real projects).