Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Result summary component - using Sass/scss

kenzo-wegherβ€’ 60

@kenzo-wegher

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions on how I can improve and/or reduce unnecessary code? Thanks in advance. Grazie mille!

Community feedback

Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

CSS NAMING CONVENTIONS 🚫:

  • Looks like the naming conventions you used for css need to be improve a lot, because you have chained selectors to apply style rules. So you can take a look at BEM Naming Convention.
  • BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.
  • BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.
  • BEM helps to avoid naming collisions and specificity issues. By using a consistent naming convention, you can avoid accidentally overwriting styles or causing specificity issues that make it difficult to style your elements.
  • This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

@kristiansnts

Posted

i don't really know about sass, but instead you use too many <div> in summary list, you can use <ul> and <li> tag ...

and in css you can use :nth-child(n) for every color and background color that different ...

keep in mind to not DRY (Don't Repeat Yourself) in your code ... reread your code, and find what you think you can use some case in just one case ...

i think if you can learn about parent and child and what can affecting in css it will be useful

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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