Your BEM looks pretty good already. Something I eventually learnt after a while is to not force the nesting when it doesn’t necessarily make sense. I was ending up with stuff like .header__nav__list__list-item. Yours is a lot better than that—I just wanted to point out that generally less nesting is better.
BEM is supposed to produce reusable style blocks. This also makes naming easier and means you don’t get awkwardly nested underscores.
For example the animation styles for the bulb at the top of the page don’t really have anything to do with the section they’re in (that animation could be moved anywhere and the styles wouldn’t change). So the CSS for the animation doesn’t need to be nested under the .report-section Block.
You could use something like .logo-animation, .logo-animation—bulb etc.
Your BEM looks pretty good already. Something I eventually learnt after a while is to not force the nesting when it doesn’t necessarily make sense. I was ending up with stuff like
.header__nav__list__list-item. Yours is a lot better than that—I just wanted to point out that generally less nesting is better.BEM is supposed to produce reusable style blocks. This also makes naming easier and means you don’t get awkwardly nested underscores.
For example the animation styles for the bulb at the top of the page don’t really have anything to do with the section they’re in (that animation could be moved anywhere and the styles wouldn’t change). So the CSS for the animation doesn’t need to be nested under the
.report-sectionBlock.You could use something like
.logo-animation,.logo-animation—bulbetc.