Submitted over 2 years ago

Results summary barebone

matryosha•190

@matryosha

A solution to the Results summary component challenge

Preview Code

Solution retrospective

Used em and rem quite irresponsible. Probably should've used rem only and think if I need em.
Implementation of partial borders for an category item are "borrowed" from here. But the suggested implementation needed a tweak as without any changes borders won't have the same width and height. I fixed it in kinda "hacky" manner because changing the height of bottom borders will render it at wrong place so I fixed it by setting negative top.
By the way, I would love to implement those border without adding these addition two divs for every category for sake of readability. I thought of using pseudo elements but you can't create that much with them. Need to see how other people implemented it.
Without using any css preprocesses such as SASS the naming become the problem. I'd like to use "self explanatory" style names but it hurts html readability. The same thing applies to css: even with such a small project the wall of styles make it hard to move.

Especially when I had to create a hacky partial borders as it creates a small wall of utility css. Not sure how to handle it but I started appreciated scoped styles more than ever.
BEM looks good in theory but that "__" everywhere hurts my eyes.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on matryosha's solution.

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