This is a solution to the Recipe page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Solution URL
- Live Site URL: Live Site URL
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
When styling a webpage using vanilla css, it is important to keep the css organized properly. I realized this when working on this challenge. As far as I can tell, most developers - including myself - prefer to have each css property and value pair on a new line. While this convention makes the code more readable, it doesn't take much for the file to reach hundreds of lines. This can make it difficult for the developer to find his way around the file when tweaking the layout.
After going through stakeoverflow and mdn web docs, I realized there is no one size fits all solution to the problem. However there are few strategies that I found which can help with this problem:
- Pick a convention and be consistent
- Add comments (particularly block comments)
- Break a stylesheet into multiple smaller ones
The led me to organize the css as follows:
- index.css - main css file referenced in the index.html file
- base.css - contains general styles and custom properties for colors, typography etc
- colors.css - contains text and background color styles based on the custom properties
- utilities.css - in this case, it contains responsive containers
- page-specific.css - contains page specific styles.
I will definitely redo this challenge using tailwind as it encourages developers to stay away from css.
- Stakeoverflow - This helped me realize the multiple ways to organize css.
- MDN Web Docs - This helped me realize the multiple ways to organize css.
- Frontend Mentor - @Comfort