First steps with CSS BEM and HTML5 sematic elements

Hey, Rene Sauerwein! 👋

Good work on this challenge! Your solution looks great and responds well! 👏

You definitely don't have to use BEM for every single element on your page. Like emestabillo, doing so can lead to very long class names that can be kind of annoying. I like to use BEM in a way that allows me to quickly understand what things are in my code but doesn't necessarily strictly follow the Block—Element--Modifier principle. For example, I'd do what you suggested and simply write author__name rather than review__author-name if author seems like a somewhat self-contained element which would make sense to do that for. I also might do things like footer__logo even if logo isn't a direct child of footer but a container or two down in the markup (since logo is a prominent part of the footer nevertheless).

Overall, I think you should do what works best for you while keeping the readability and understandability of your code to others in mind. 😉

Keep coding (and happy coding, too)! 😁

Hey Rene, looks good! Site is responsive and awesome job with mobile-first. Just a few thoughts:

• I'm not an expert, but I like to keep BEM nested at two levels only to avoid BEM fatigue lol. I also get lost in it sometimes. I then leave the other nested contents as separate classes. I'd also like to get others' opinion regarding this :-)

• The five-stars and reviews divs could use the max-width property to control the stretch in medium screens. The appear really long before the breakpoint. The site may be ready for desktop design at around 900px or so.

• For your box-n question, I would try to style the divs using nth-child if you didn't want to add another class for the staircase effect. (I hope I understood the question correctly)

Hope this helps!