NFT preview card component challenge - Solution using CSS Grid
Design comparison
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
- @xCordevaPosted about 1 year 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 onep
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 helpful1@Leo-Code-CAPosted about 1 year agoHey @xCordeva !
Thank you so much for your detailed answer! It's really helpful.
Have a great day :)
0
Please log in to post a comment
Log in with GitHubJoin 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