Design comparison
Solution retrospective
Hello everyone! I'm excited to share my solution for this challenge. While I kept the styling simple using Vanilla CSS, I welcome any feedback related to accessibility. Thank you for taking the time to review my work!
Community feedback
- @Mohit-k-MummonPosted over 1 year ago
Hey, man! Congrats on completing the project. Have you heard about CSS modules for your React components? I took a glance at your code and noticed that you keep all your styles in a single file. If I may, I'd suggest diving into CSS modules and getting comfortable with them, especially for larger projects. For now, it's fine to keep all your styles in one file for a small project. However, as your projects grow and you start building multi-page websites, having everything in a single file can become a real mess. Trust me, I've been there and made that mistake myself.
When it comes to organizing styles in React projects, there are a couple of other options worth exploring. For instance, you could check out libraries like "styled-components" or leverage the power of CSS preprocessors. Take the time to experiment and see what works best for you. Happy coding!
1@mariocc22Posted over 1 year ago@Mohit-k-Mummon
Thank you man for the valuable feedback! I would appreciate your recommendation between using styled-components or SASS for real projects. As a developer, which one do you believe offers more value?
0@Mohit-k-MummonPosted over 1 year ago@mariocc22
It depends. If you like writing CSS alongside your JavaScript in the same file, you could enjoy styled-components. Personally, I dislike having them in the same file. So, if you don't like that, then maybe SASS could be the way to go as it maintains a more traditional separation of concerns. SASS can help streamline your styling process and make your code more organized, especially for larger projects. It has a large community and extensive documentation, which can be advantageous when seeking support.
I would recommend experimenting with both in smaller projects to get a feel for their respective strengths and see which one aligns better with your workflow and project requirements.
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