Results Summary Components - A Responsive CSS Project
Design comparison
Solution retrospective
I had some difficulties simplifying the code, especially considering responsiveness. And I had a lot of difficulty aligning some elements. It would be great to have feedback on coding optimization and whether I wrote the responsiveness appropriately.
Community feedback
- @kkalvaaPosted about 1 year ago
Couple things:
1: Don't absolutely position content I noticed that you're using "position: absolute;" to put the component in the middle. As a result both <body> and <main> end up "empty" and you can't reuse the component elsewhere. You should instead use display: flex or grid on the parent container and justify and align to center. By doing so you make a more reusable component that doesn't dictate its position by itself, but the responsibility of positioning is moved to the parent container, where it belongs.
2: Don't use id selectors. In css it is considered bad practice to use id selectors over class selectors (or similar). The reason is specificity, ids have a MUCH higher specificity than classes and aren't reusable. Even if you only intend to target one single element you can still do so with a single use class, but you regain the advantages of having lower general specificity. Also, if the component where to be used twice on a page you wouldn't run into conflicts having to identical ids on the same page.
3: Be careful with absolute values. You're using absolute widths and heighs a lot in your code, that can lead to problems with responsiveness. Usually I find it better to not specify a height or a width, but let the element use the available space, or use min-width/max-width, etc. My guess is that most of your responsiveness problems comes from absoulte values.
4: Don't use magic numbers. This is an extension of the previous, but separate issue. Wen you specify a value, like 55px height. That only works because it happens to be the right value right there, but if there's an ever so slight change in the rendering of the page, say the user zooms in a little bit, things can stop being just right. Read this for more info: https://csswizardry.com/2012/11/code-smells-in-css/#magic-numbers
5: Don't repeat things in media queries you're not actually changing. You should only write code you're actually changing inside a media query. For instance, there's no point in setting the font-family on the *-selector to the same value as you have it normally. That only leads to more code and less maintainable code. Only write things that actually changes.
6: Use the :root selector instead of the all selector for universal styles. font-family, font-size, etc. should be put on :root and then cascade down to everything instead of being explisitly set to everything. It'll be easier to override that way.
Marked as helpful1@arthurbicegoPosted about 1 year ago@kkalvaa thank you very much for your detailed feedback! It helps me a lot. Some of your tips I have already fixed in my code. Others I'm trying to better understand how to do.
If possible, can you guide me how to set the "dashboard" using no magic numbers? Could I use font-size references like rem or em?
0@kkalvaaPosted about 1 year ago@arthurbicego You probably don't need any width or heigh for many things, or just "width: 100%;", and that will remove a lot of your magic numbers. Otherwise use ems, rems and % to get away from magic numbers.
1@arthurbicegoPosted about 1 year ago@kkalvaa I've been studying this subject a little lately and managed to understand some concepts. Thanks again!
0
Please log in to post a comment
Log in with GitHub
Join 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