Responsive Mobile First design using Flex-box and Media Queries

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Oshane, congratulations for your solution!

  Answering your question:

  By what I know of bem, each element inside a block should have the name of the block in the class, for example your div card, the class under it should be card__image and card__main in this case there are no modifers, but if was the case, the class wil lock like this card__image--transparent. Check the guide I let to you below, that explains everything.

  QUICK GUIDE ABOUT BEM: https://css-tricks.com/bem-101/

  Hope it helps and happy coding!

  Marked as helpful

  1

  ---

  

  Oshane•130

  @Noid3ahPosted over 2 years ago

  @correlucas Thank you, it was helpful.

  1
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats on finishing the challenge!

  Good job choosing BEM right away, you will not regret it!

  In this case you need to define different blocks, and each blocks has his own elements / modifiers, for example your full component could be on a main tag with the main class, then you could divide it in to sections one for the image and one for the rest, the first one would be image as you did on your project, but for the child image you need to define it with __ since is a directly child for example: image__cologne. For the other section, try to get more specific class names like, section__heading, section__description, section__productName, when you do a modifier like in the prize, you use the modifier on the different element the discounted prize, can be something like section__prize and section__prize--discounted.

  You only write -- when is a modifier of an element that already exists!.

  Hope my feedback helped you!

  Marked as helpful

  1

  ---

  

  Oshane•130

  @Noid3ahPosted over 2 years ago

  @DavidMorgade Thank you!

  0