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

Stats preview card component with Sass and BEM

Santiago 140

@santiagosg

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback would be appreciated thank you

Community feedback

P
Jessica 880

@perezjprz19

Posted

I think your design looks great. I do have a question though...

Is there a benefit of having 6 separate media queries for the same min-width rather than just consolidating all your changes into one media query?

I did see you are using Sass, but I haven't really delved into Sass at all.

0

Santiago 140

@santiagosg

Posted

Hi @perezjprz19 That's more to my liking, there is a way when you use a single media query for all the elements, and in teory (and probably in practice) is faster, but to the developer I think is more complicate to maintance, that's why I use a media query per class.

I recomend you to go into Sass or Less (in jobs it seems to me that they ask more for sass) after working a bit with css. It helps a lot, and it has more to offer, but this type of project is too small to use some more of sass, like mixins.

0
P
Jessica 880

@perezjprz19

Posted

@santiagosg

Oh ok. I usually just design all mobile first and then add all changes under one media query. I had never seen it in the way you did it, so it got me curious to see if maybe that's something I should think about adopting.

I guess I'll find out how easy/hard to maintain when I move up to the larger projects lol.

I've been doing vanilla CSS for a while now but I'm just beginning to actually understand it a little. I am curious about Sass and Less and I know I'll need to get familiar with it at some point, but I'm not sure when I'll be ready. I still struggle with vanilla CSS quite a bit even though I have gotten much better.

0
Santiago 140

@santiagosg

Posted

@perezjprz19

If you have been working with css, even if you struggle a bit, I recomend you to pass to Sass now. All you do with css, you can do it in Sass, Sass is practically css but with a system. Go for Sass and learn BEM.

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