Responsive NFT card Component using BEM methodology for HTML

Solution retrospective
I'm proud of the active state of the image. I think it could have been done in multiple different ways, so I would say I had to be a little bit creative, which is a good thing because CSS should be about creativity and not just routine tasks. Next time, I would time myself because I think I spent longer on this project than I would have liked.
What challenges did you encounter, and how did you overcome them?Setting the active state of the main image was quite difficult for me. I tried looking for a video on YouTube, but I couldn't find the right one, so I broke down what I was trying to do into tasks.
- Icon appearing on top of an image
- Background image overlay effect After I did this, I found the videos to help me achieve each task. All I had to do was put them together, and everything worked.
I want some advice on the structure of my HTML. I tried to follow the BEM methodology, but some elements or blocks didn't fit the BEM structure, such as <div> elements used as containers only to display flex(for layout purposes), should these be elements or a new block entirely? If anyone can rewrite my structure using BEM correctly, so I can see where I possibly went wrong I would gladly appreciate it.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @TetianaAleks
Great job on the project, and it’s especially commendable that you approached the task of setting the active state of the image creatively. Overall, your project looks clean and well-structured, but there are a few areas that could be improved, especially with regard to applying the BEM methodology.
- Using <div> for containers: In BEM, it’s important to stick to the principle that elements used purely for layout (like containers with display: flex) don’t necessarily need to be blocks. In your case, the <div> elements serving as flex containers could be part of a larger block, like .card, rather than creating new blocks for them. For example, if you have a container for price information, it can be an element of the .card block rather than a separate block.
- Revisiting the class structure: You might want to slightly improve the class organization. For example, for containers, you could use names like .card__info-container, which clearly indicates its relationship to the .card block. Meanwhile, elements like icons should be more specific: for example, .card__icon-ethereum, so the class name reflects their purpose precisely.
- BEM recommendations: In BEM, if you are using containers purely for layout (like a div with flex), it’s better to name them as elements of a block with the __ suffix rather than as separate blocks. For example:
Overall, you're on the right track, and small adjustments in class organization and using BEM more effectively will help make your code cleaner and easier to maintain in the future.
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