Where is the best place to place a conditional appearance modification (CSS + JS)?

Question

JavaScript

The question is which style rendering is beneficial for the browser and for loading/storyboard speed more.
Now:
when we scrolled 100px, we hang a class on the body (scrolled) and want to change the appearance of .header
and write styles, as a result, after compilation:
.scrolled .header {...}
.scrolled .header .search__input{...}
and so on if there are changes to other objects in the header.
And if you make changes to individual elements, will performance improve?
(at the same time, if there are 20 elements, then 20 accesses through js)
.header--scrolled {...}
.search__input--scrolled {...}
And then how to work with the rest of the elements, like .overlay. Contact will not be very convenient.
Another question is about media queries. Does overriding block sizes from media queries slow performance down?

Answer 1

Show the part of the code where the error occurs. In the browser console there is an indication of where the

Answer 2

(subjectively)
1) It will not change
2) We go from the device, media conditions are picked up and everything is rendered as it should be, but if of course we rotate the screen width forcing the browser to update the state, then I think it reduces.
Of course, I didn’t measure it, it’s just my subjective, it’s better to devote time to optimizing graphics and heaps of asynchronous http requests, there are a lot of these on sites and loads well