Skip to content
Submitted over 1 year ago

Product Preview Using BEM Methodology

accessibility, bem
karthickg24•130
@karthickg24
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I have written CSS in BEM methodology. I m still learning it. I also implemented style in grid system.

I also learned...

  • ... that applying box-radius in container of image doesn't apply the box-radius to image. image will override style from parent. To make images inherit the styles, i used box-radius: inherit in image
  • ... about .visually-hidden, how it helps screen-headers to read content, yet content is hidden from displaying
What challenges did you encounter, and how did you overcome them?

Writing CSS in BEM some what tricky at first. I need to explore and try other projects to fully understand it.

What specific areas of your project would you like help with?

Please provide suggestions on using BEM methodology. How to improve my code in Accessibility

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    This project looks great and you've used BEM correctly throughout so no feedback to give there!

    Your padding on the text side of the card looks a little smaller than the design on desktop that's the only very very minor thing I noticed.

    And be careful with code indentation in html. The closing button tag should be on a new line so it's easy to read where that element begins and ends. (Again a very very minor note!!)

    On the border radius question you don't need to do what you are currently doing. Just set border radius on the component itself instead of on the child elements, but include overflow: hidden so it crops out the overflowing child corners. Then you can remove all border radius from individual corners and have shorter css.

    Marked as helpful

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