Skip to content
Submitted almost 4 years ago

First steps with CSS BEM and HTML5 sematic elements

Rene Sauerwein•55
@rsauerwein
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey,

my 2nd project. It feels good, as compared to the first one I was far less struggling and I definitely made already some progress.. :)

This time I tried to focus on using HTML5 semantic elements and using BEM. So I would be thankful if you could take a closer look on it.

Honestly using BEM sometimes felt weird. My CSS is now definitely more structured but I felt like I'm blowing up my code and sometimes I didn't know what to do.. Especially with nested boxes I felt like it's getting complicated. For example while creating classes like review__authorname , review__authorname I asked myself if it wouldnt be better to create classes like author__name. But I guess that way I would break BEM naming conventions.

Also the classes box-1, box-2 and box-3 were special as I asked myself if I should really create duplicate code just to follow BEM. In that example I decided to don't do it..

I would be thankful if someone more experienced has some input for me. Also all sort of other suggestions are welcome.. :)

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    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)! 😁

    1
  • Emmilie Estabillo•5,540
    @emestabilloPosted almost 4 years ago

    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!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord