Product card component - responsive

Community feedback

• 

  Prashanth•290

  @PrashanthBalakrishnanPosted about 1 year ago

  Try using BEM naming model for your class names. use this link to get more information https://css-tricks.com/bem-101/.Also use semantic HTML for better SEO.

  0

  ---

  

  Jose Antonio González Santos•90

  @devpullcodePosted about 1 year ago

  "Hello, @PrashanthBalakrishnan! I would recommend using the BEM (Block Element Modifier) methodology, which will help you write more modular and reusable code. 👨‍💻

  Considering the card element, you could have named it card-container or card-wrapper. Everything inside this container element could be named as the card block, followed by different elements, for example: card__img-container, card__img-mobile, card__content, or card__content-information. The key point is not creating a new block level within the same container; the container will always be the block, and all the content will be elements or element modifiers. In other words, instead of creating a new block named information within card__information, you can use card as the block and information__category as the element. If the latter had a modifier, for instance, when hovering over it and changing its color to blue, you could add a new class with the modifier card__information__category--active, and this class would apply the styles for :hover. 🎨

  I hope this explanation helps you improve your class names. I'm looking forward to seeing your code updated with the new classes following the BEM methodology.

  Here is the link to the BEM website for more information: https://getbem.com. 🚀"

  0