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

Planets fact site w/ React and SCSS

kristi 130

@kristiingco

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, Frontend Mentor community! I would love to gain feedback for this specific project.

I have the following questions:

  • How would one best structure their components? What is the best way to be able to know what components to construct?

  • What are best practices for clean CSS/SCSS code?

  • Are there any pros and cons to other CSS preprocessors?

  • If you could do this project with a React framework (such as Next.js, Gatsby, etc) , what would you choose?

Thank you so much! This project was a blast to do.

Community feedback

@jemeneradev

Posted

Personally, I find css preprocessor quite useful. With scss, for example, you can nest css definitions. That makes things logical and neat. You can also have modules and mixins that act a type of style inheritance, so you don't have to repeat common styles. Not to mention loops in css.

For clean css, you'll just have to look at different approaches. For instance, nowadays, tailwind css is all the rave. I tend to stay away from that because it makes the markup too cluttered. You could also checkout bem (http://getbem.com/introduction/).

As far as I know, gatsby is content management system, so between the two, I would opt for nextjs.

Regarding component structure. One rule I follow is, if I find myself repeating code, more than likely it can be group logically.

Marked as helpful

0

kristi 130

@kristiingco

Posted

@jemeneradev Thank you so much! This helps a lot. I am definitely interested in utilizing Tailwind and/or BEM conventions in my next project!

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