Design comparison
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
- @jemeneradevPosted over 2 years ago
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 helpful0@kristiingcoPosted over 2 years ago@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
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