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

Responsive Product Card Component using CSS flex & Css Variables

Chris 180

@chrizgx

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Aloha! This is my first project here and I am really excited. As you may notice, I used CSS Variables to change margin-bottom property on many elements. The reason is that if I had to write a single rule for every single element multiple times, readability would have been affected negatively. I thought variables would make code much more readable and easier to alter and review. Is there a best practice for such situations, or a better way to achieve the same result? Thank you in advance.

Community feedback

@rachelktyjohnson

Posted

Hey Chris, welcome to Frontend Mentor and congrats on your first-ever project! I think it's a great idea to use variables to contain values that you think will be repeated a lot, it's a very programmatic way of thinking! I think you may enjoy Sass, check it out here! https://sass-lang.com/

1

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