Submitted 10 months ago

NFT preview card component challenge - Solution using CSS Grid

#animation

Leo-Code-CA• 60

@Leo-Code-CA

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi guys!

I have a question about best practices. I know it's usually recommended to use a CSS class selector .myclass instead of an id selector #myelement or an element selector div.

However, I was wondering, is it better to create a class even if we won't reuse it? For example:

<body>
  <section>
    <p class="myparagraph"></p>
  </section>
  <section></section>
  <section></section>
  <section></section>
</body>

If I want to style the paragraph, is it best practice to delete its class in the html and do:

p {
  color: blue;
}

OR this:

section p {
  color: blue;
}

OR do I keep the class of the paragraph (even if it won't be reused) and do:

.myparagraph {
  color: blue;
}

Thanks and happy coding :)

Community feedback

Ahmed AbdElAal• 320

@xCordeva

Posted 10 months ago

Hey Leo,

As you mentioned, it's generally better to use classes instead of IDs because they are reusable.

And for your question, I wouldn't recommend using the first approach:

p { color: blue; }

This would apply to all the paragraphs on the page, which might not be what you want.

The second approach:

section p { color: blue; }

is better and can work fine for smaller projects. However, in larger projects, it can be harder to manage and understand which p you are styling since a section could contain more than one p

That's why it's always better to use a class, even if you are not going to reuse it. Giving a class is a cleaner and more efficient way to apply styles, especially when dealing with bigger and more complex layouts where you want to be specific about which element that you're targeting.

Hope this helps

Marked as helpful

Leo-Code-CA• 60

@Leo-Code-CA

Posted 9 months ago

Hey @xCordeva !

Thank you so much for your detailed answer! It's really helpful.

Have a great day :)

Please log in to post a comment

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