Suppose I have an element that, depending on the state of my app, will either be display: none or display: block. Is it preferable to group all the other styles for the element with one of these rules, or does it make no difference because the browser needs to rerender anyway?
That is, is one of these better?
`.my-element {
display: none;
color: red;
height: 50px;
width: 100px;
}
.my-element.visible {
display: block;
}
~~~VS~~~
.my-element {
display: none;
}
.my-element.visible {
display: block;
color: red;
height: 50px;
width: 100px;
}
`
Philosophically it seems like the styles would be grouped with the display value that makes them have an effect, but is there any extra work the browser has to do when more rules are applied when the visible class is added?
