Improve performance of CSS class switch - css

Question

I have a list of items that can be displayed in "grid or list" mode.
This is implemented in HTML this way :
<!-- List mode -->
<div class="items list">
<ul></ul>
</div>
<!-- Grid mode -->
<div class="items grid">
<ul></ul>
</div>
When the user clicks a button, I just switch between the grid/list CSS classes using jQuery. In my stylesheets I'm styling the .items.grid > ul / .items.list > ul, sometimes hiding sub elements in grid mode, something like :
.items.grid .hidden-grid {
display: none;
}
.items.grid ul li {
float: left;
display: inline-block;
width: 80px;
height: 80px;
}
The number of elements displayed in the list can vary, and is loaded via "infinite scroll" until there are remaining items.
This is working fairly good, but it starts being slow when the number of elements grows. I was expecting this to be instantaneous, but it blocks the browser.
What could I do to make it faster ?
The looks related to the browser having to render the elements again.
Could this be related to the CSS structure ?

Answer 1

This was actually related to CSS selectors and the way the browser parses them to render the page, or render elements again.
It is very logical when you know, but browsers evaluate CSS selectors from right to left, starting from the element they will finally have to style. Even CSS IDs don't make a big difference. This is different from the jQuery way of thinking.
Writing efficient CSS selectors
Optimize browser rendering
Why do browsers match CSS selectors from right to left?
So I replaced element selectors by classes selectors, remove deep selectors, and the difference is noticeable.
HTML
<div class="items">
<ul class="grid">
<li class="item>...</li>
</ul>
</div>
CSS
.grid .item {
...
}
.grid .hidden-grid {
display: none !important;
}
.list .item .description {
...
}