Submitted 6 months ago

Responsive order summary component using BEM

#bem

Matias• 50

@matiaslagoevia

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Very fun challenge!

What I found the most difficult with this project was starting to familiarize myself with BEM and how it works. I came up with a diagram and had a very helpful discussion with @gracesnow, as well as learning from a ByteGrad video about the subject. This and more helpful resources are present in the submission README.

I'm confident about my entire code, I feel that it's been as simple as I could make it while still being responsible and following best practices. As always, however, there is stuff I may be missing and/or be incorrect about, so I look forward to hearing those!

Community feedback

Account Deleted

This comment was deleted 6 months ago

Matias• 50

@matiaslagoevia

Posted 6 months ago

@davood-webdev Thanks! Please clarify my understanding below if I missed/got anything wrong.

If I understood your message correctly, your feedback is the following:

Rather than plan-selection__img, plan-selection__text, plan-selection__link, I should use card__plan-selection__img, card__plan-selection__text, card__plan-selection__link.

From my understanding, this would break BEM conventions of <block>__<element>--<modifier>.

For card__plan-selection, this is saying that the plan selection element is part of a card block.
For plan-selection__{img,text,links}, this is saying that each one of those elements is part of a plan-selection block.

Please log in to post a comment

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