
Design comparison
Solution retrospective
I'm happy with how my link hover animation turned out. It took some fiddling around with but I got it to work just like the demo.
What challenges did you encounter, and how did you overcome them?I mostly had to use trial and error to figure out the transition functions for my hover animation. I had to reference the MDN docs to help me figure it out.
What specific areas of your project would you like help with?I would like help with the organization of my CSS file. Any ideas on how I could rewrite it to make it easier to understand to other devs is greatly appreciated!
Community feedback
- @skyv26Posted 2 months ago
Hi @Dasaru,
CSS Review & Recommendations:
-
Group Similar Styles:
- Organize by typography, layout, media queries, etc., for better readability.
-
Consistent Units:
- Use
rem
for font sizes for scalability (avoid mixingpx
andrem
).
- Use
-
Merge
transition
Properties:- Combine
transition
declarations for hover effects into one rule.
- Combine
-
Organize Media Queries:
- Group media queries under a "Responsive Styles" section for clarity.
-
CSS Variable Fallbacks:
- Provide fallbacks for font-family and color variables for compatibility.
-
Improve Class Naming:
- Consider using BEM methodology for consistent, descriptive class names (e.g.,
.social-links__list
).
- Consider using BEM methodology for consistent, descriptive class names (e.g.,
These changes will enhance readability, maintainability, and scalability of your CSS.
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