Responsive design with CSS Variable and plain HTML
Design comparison
Solution retrospective
Had to take down my nested CSS as it was not properly displayed here on Frontend Mentor
Community feedback
- @hitmorecodePosted over 1 year ago
I don't understand this. Why would you repeat yourself more than once?
:root { --clr-primary-hsl-400: 252, 100%, 67%; --clr-primary-hsl-500: 256, 72%, 46%; --clr-secondary-hsl-400: 241, 81%, 54%; --clr-secondary-hsl-500: 241, 72%, 46%; --clr-neutral-hsl-100: 0, 0%, 100%; --clr-neutral-hsl-200: 221, 100%, 96%; --clr-neutral-hsl-300: 241, 100%, 89%; --clr-neutral-hsl-700: 224, 30%, 27%; /* I don't understand this, this is exactly the same as above. why repeat again here? */ --clr-primary-400: hsl(var(--clr-primary-hsl-400)); --clr-primary-500: hsl(var(--clr-primary-hsl-500)); --clr-secondary-400: hsl(var(--clr-secondary-hsl-400)); --clr-secondary-500: hsl(var(--clr-secondary-hsl-500)); --clr-neutral-100: hsl(var(--clr-neutral-hsl-100)); --clr-neutral-200: hsl(var(--clr-neutral-hsl-200)); --clr-neutral-300: hsl(var(--clr-neutral-hsl-300)); --clr-neutral-700: hsl(var(--clr-neutral-hsl-700));
Why three times the same media query? Why not place all under one media query?
@media (min-width: 600px) { body { min-height: 100vh; display: grid; place-content: center; } } @media (min-width: 600px) { .result-summary { grid-template-columns: 1fr 1fr; border-radius: var(--border-radius); box-shadow: 0.5rem 1rem 3rem hsl(var(--clr-neutral-hsl-700), 0.2); margin-inline: 1rem; } } @media (min-width: 600px) { .results { border-radius: var(--border-radius); } }
For best practice try to make it DRY (Don't Repeat Yourself) as possible
1@DonsmattPosted over 1 year agoFor the variable styles, i made one without the hsl() function and one with hsl() function, so i can manipulate the opacity within the code. Makes it less stressful for me, and if you look closely, you'd notice it too.
Then for the media query appearing at different parts of the code, it's just a preference i learnt from Kevin Powell about work flow. It goes with the workflow. But then again, i heard some servers compile it down to one code during production, so it didn't hurt to try. I basically tried a different approach than i normally do anyway. Thanks for the comment. It's very much appreciated @hitmorecode
0@hitmorecodePosted over 1 year ago@Donsmatt you could have done someting like this
:root { --text-color: 230, 25%, 78%; } body { color: hsla(var(--text-color), 0.5); }
Without repeating, anyways it's just a tip 😁. Can you send me a link to the Kevin Powell video you are talking about? Most of the thing I know about CSS I've learned from him. Maybe i missed something.
0@DonsmattPosted over 1 year agoYeah, i understand the issues with the naming convention. Thanks.
https://youtu.be/g1kF45K-q7o @hitmorecode
0
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