Result summary component
Solution retrospective
Feedback welcome:)
I had some problems getting the summaries on the left side of the component. I needed a lot of HTML markup to get it to work properly. And because I didn't fully plan it out, it has become a bit of a mess of classes.
- When do people take a step back and decide to restructure the HTML markup?
- How do people decide between adding classes to elements (making the p tag class="result__text" versus making the CSS selectors more specific (for example *.result p {} *)?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @joewild90
Hey! I know these problems too well. Especially when I do a project for learning I constantly try to optimize the html structure and css class names. Unfortunately in reality when you do work for clients you sometimes don't have enough time. So take your time when doing projects on frontend mentor. If I am done with a project I will look at other peoples solutions and adjust my code.
To answer your second question you may want to read more about conventions/systems like BEM. You are already using the .block and .block__element notation in your code. According to my understanding when using BEM you make everything a class and avoid normal/nesting selectors. Therefor the question, when to nest selectors and when to use classes, does not arise. The hard part for me always is deciding when to start a new .block vs when to make it just another element.
Marked as helpful
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