Design comparison
Solution retrospective
i need some advice on how to make classes in css much cleaner
Community feedback
- @fortunat81Posted about 2 months ago
Great work ! totally understand you wanting to make your classes cleaner i would suggest using the (BEM) method (BLOCK->ELEMENT->MODIFIER)
here is one ressource : https://css-tricks.com/bem-101/
exemple
<div class="social-links"> <div class="social-links__header"> <div class="social-links__img-container"> <img class="social-links__img"> </div> <div class="social-links__text-content text-center"> <h2 class="social-links__name"></h2> <p class="social-links__location"></p> <p class="social-links__description"></p> </div> </div>Marked as helpful1 - @TedJenklerPosted about 2 months ago
Hi @YourRat-webdev,
Nice project! Here are a few suggestions:
I noticed that your component is deeply nested. I recommend using <div>s sparingly to improve readability and SEO. This project can be easily managed with one main container and then a card component using Flexbox in a column layout to achieve the stacking effect you have now. This approach will make your code cleaner, more readable, and reduce the amount of CSS needed. Simplification is often key.
I also noticed that you are nesting <a> tags within <button> tags. This is not recommended. You should either style an <a> tag as a button if it functions as a link or use a <button> but only for forms or JavaScript actions.
Keep up the great work!
Best, Teodor
0 - @dejuliansrPosted about 2 months ago
I'm still a beginner, you have done your job very well, keep practicing your skills
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