@turtlethom
Posted
Hello Yuliya, I think your project looks fantastic. It's very responsive and looks great on all viewports. The presentation of the content on the recipe page is very professional.
I see you have used CSS variables to store the corresponding colors. You can reduce the amount of CSS you have written by defining your own CSS Utility Classes.
- Basically, utility classes group styles that you use very often into one class so you don't need to write the same line over and over.
Example:
/* Your colors */
:root {
--rose-800: #7a284e;
--rose-50: #fff7fb;
--stone-900: #312e2c;
}
/* Your CSS Utility Classes */
/* Text Colors */
.text-rose-800 { color: var(--rose-800) }
.text-rose-50: { color: var(--rose-50); }
.text-stone-900: { color: var(--stone-900); }
/* Background Colors */
.bg-rose-800 { background-color: var(--rose-800) }
.bg-rose-50: { background-color: var(--rose-50); }
.bg-stone-900: { background-color: var(--stone-900); }
<body class="bg-stone-100">...</body>
You can apply these classes to the necessary elements and reduce the amount of times that you write background-color: var(--stone-100);. This is a small example, but I hope this helps!
- It's a bit tricky to get the hang of at first (I struggled understanding when to create utility classes), but it's very worth it, especially for larger projects.
- You'll speed up the performance of your application, as reducing the duplicate styles will lead to a smaller CSS file.
- These classes can expand to
font-family,font-weight,padding-left, etc.
If you'd like to learn more, I found this resource to be quite informative: How I use utility classes to write more efficient CSS
I hope this helps!
Keep up the great work! You have a good eye for details :)
Marked as helpful
@O-Julia-O
Posted
Thanks a lot! @turtlethom I totally forgot to mark it as helpful, I do apologize for this!
