- I recommend you look up Andy Bell's css reset for projects like this. Make sure you understand that there are various ones out there, understand why each property has been chosen and select a reset based on your preferences. They will become more important on bigger projects so it's good to make sure you've made an intentional choice.
- Make sure you understand why rem is needed for font size. https://fedmentor.dev/posts/font-size-px/
- It's very rare you'll ever need to use min-width anywhere. Max-width on components makes sense because you want it to be able to shrink narrower when it needs to like on smaller screens. If you set a width or min-width the browser has no choice but to honour what you've said, even if there isnt space available and the component will have to overflow the screen on the side.
- Similar principle for the min-height. If you set a fixed height or max-height then the browser has to limit the height as you've asked. But as soon as the page contents are longer/bigger than the screen (think smaller mobiles, landscape orientation or zoomed in sites especially) then they wont fit, but the browser will still want to try and make everything fit into the limited height you've set. That can lead to really horrible bugs where content overflows the screen at top and bottom and users can't scroll up to reach it.
- On understanding units: It's rare you need em units. You only use that in specific cases where you want a property vale to always be relative to the font size of the element. So perhaps button padding. In Contrast, you'll want to use rem a lot because that relates to the default text size in the browser (1rem is 16px by default). Users can change this in their settings though (browser or device settings). We use rem whenever we want something to adapt to that setting. If a user says they want the text size to be 200% (32px) then we want text on our site to honour that, which is why we use rem for font-size. But we also want the component to get bigger if there is space to make room for that large text, that's why we set the max width on the component in rem. If we set it in px they'd have huge text in a narrow container. Lastly pixels. You only use that when you want a property to always have a fixed value. Padding on the body, for example. You wouldn't want that to change with the users text size setting so px makes a lot more sense than rem there.
Marked as helpful
@mdchong
Posted
@grace-snow
Thank you so much for the feedback! I never considered why we should use rem instead of px for texts. Now, I understand how it relates to the user's experience and viewport. I should always keep this in mind and always consider using rem for texts rather than px.
I also can see why people use min-width for mobile -> web and max-width for web -> mobile, when it comes to media queries. I was always confused by this concept, but now it makes sense why max-width is preferred for components, as it helps shrink the components on a smaller screen.
I'll make sure to check out various CSS resets to understand why each property was used and chosen and why I should choose a certain one for different circumstances.
Thank you for all the help!
@mdchong to be clear I wasn't talking about media queries in the above.
For defining media queries see https://fedmentor.dev/posts/responsive-meaning/. You almost always want to work mobile first so would only add a min-width media query to target and make changes for larger screens inside the media query.
Marked as helpful
@mdchong
Posted
@grace-snow Oh, yay! Thank you so much for the post. It was my first challenge here at Frontend Mentor, and thanks to you, I'm gaining so many good resources. 😀👍
