Skip to content
Submitted 3 months ago

NFT preview card component using BEM and SASS

HL Wong•290
@hl-wong
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

So far for now I have learned the methodologies and architectures from Frontend Mentor "Advanced CSS techniques", and I have applied BEM (Block, Element, Modifier) with SASS in this challenge.

What challenges did you encounter, and how did you overcome them?

I think it been a long time that I didn't use SASS, and forgot how to use it. I searched some article example like Medium, CSS-Tricks on how to use BEM with SASS.

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

I'm not sure I applied the right way of BEM (Block, Element, Modifier) in this challenge. Feel free to give feedback if I applied the wrong way.

Community feedback

  • Andrew•130
    @cartaplassaPosted about 2 months ago

    Everything's great, except BEM components are not divisible. There are two approaches to fix that: restructurize the card block, so that each component has a unique name, or separate the component into its own block. Eg. with card__content__info__ethereum that'd be either card__etherium-icon or price__icon respectively.

    Edit: you can use both at the same time, but as different classes.

    1

Please log in to post a comment

Log in with GitHub

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