CSS child selector performance vs. class bloat

Question

I\'m trying to learn to write more efficient CSS, particularly as I\'m working with a fairly complex site that needs to render fast.

I\'m used to having a lot of thi

Answer 1

The best trade-off, I think, is using the child combinator > for elements that are repeated many times and using classes when things start to become too nested.

Bending the Rules of BEM

The above article strikes the perfect balance, I think, considering our options.

Using SCSS, which ought to be obligatory nowadays, my navigation menus usually look like this (which is definitely the most I will ever nest stuff):

.header__nav {
  > ul {
    > li {
      > a {}
    }
  }
}