Design comparison
Solution retrospective
My biggest takeaway from this challenge is CSS utility classes. I took another approach than I usually do and focused on using utility classes and CUBE CSS methodology to reduce repeated CSS. It is a smaller project, and it won't ever grow. However, I tried to write my code so that the project could expand without causing issues in the future.
This mind shift was difficult in the beginning. But overall, I like this approach more than what I did before. The code is more fluid, easier to read, and to change (if needed).
Notes for the future:
- Place the utility classes last in the CSS code - it should overwrite everything else.
- I used utility classes for
color
,background-color
,font-weight
,font-size
,font-family
, and spacing (named flow). Other styling I did in the CSS file.* - Use "|" to differentiate utility classes and other classes.
*Mixing utility classes with CSS feels like a good idea. My HTML won't be full of a million classes, and I don't have to repeat basic styling in my CSS file.
What challenges did you encounter, and how did you overcome them?Basing my code on the CUBE CSS methodology was quite challenging since I'm not used to structuring my code this way. Ultimately, I'm delighted with this approach and excited to learn more about it.
What specific areas of your project would you like help with?I want to continue to focus on trying out this utility class and CUBE CSS approach. It feels like a more professional way to write code - I'm not 100% sure.
- Is this a good way (understandable, easy to work with, etc.) to write code?
- I'm curious about how professionals usually structure their code and why. Is it in this way? Does it vary a lot depending on the individual and workplace?
Community feedback
- @itzL1m4kPosted 7 months ago
You're desing is amazing, and your code is very readable.
1
Please log in to post a comment
Log in with GitHubJoin 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