Hello Reader,
This week, we’re taking a break from the shorter summer versions of the newsletter. We’ll be back to the shorter summer version next week.
Last week I asked about whether or not you use em units… and I do apologize for the survey being closed for a lot of you, I hit my limit much faster than I’d anticipated, and probably should have just used a simple Google form for that one…
Anyway, the results are in and 52.3% of people said they did, which is lower than I’d hoped, but actually more or less in line with what I expected.
When learning CSS, we’re often told of the problems that em units can cause, and in the survey, a lot of people echoed those types of things, with explanations like:
Because of inheritance issues.
I don’t like using em’s because they sometimes produce unexpected results in nested child elements (em’s compounding effect in nested children).
unexpected consequences in layout
Find rem to be more predictable and easier to maintain. Also rarely work on components that should have different font sizes based on where it’s used. Rem always just seems like the better pick.
I even have a (very old) video on the problems that em can cause, so I might even be one of the contributing factors into why people avoid them.
I think this highlights one of the issues that happens when we’re first learning CSS, which is that there is a lot of advice that’s given to help simplify things.
We’re learning a lot all at once at the start, so we’re told to use classes for everything to avoid specificity issues, and we’re shown how rem is more consistent, and so on.
The thing is, a lot of that early advice is akin to putting training wheels on a bike, allowing us to focus on some things without being overwhelmed by trying to learn everything at once.
Once we know those basics, though, I think it’s good to start experimenting with some of the those things that we're told to avoid.
Sometimes, we'll reinforce our thoughts on why we were avoiding it, but other times, we find good use cases for those things, as many people shared with their uses cases:
For a span .bigger { font-size: 1.1 em }
font size responsive letter/word spacing
Padding and margins. I like them because they scale with the parent element.
Although more niche than consistent units, there are a lot of great use cases for using relative units.
And of course, there is the strange thing with relative units where they change what they are relative to, depending on what property you use them on!
If you use it for the font-size, it’s relative to the parent’s font size, but if you use it for other things like padding or letter spacing, then it’s relative to the font size of that element, which is where I use it most often.
So if you have been holding back on something because you’ve heard it’s a best practice, or maybe because you ran into issues with it in the past, I’d strongly suggest revisiting them to see if maybe, now that you know CSS better than you did before, you can’t find some good ways to use it.
🙋♂️ What I’ve been up to this week
Is HTML the hardest language?
A little while ago, I challenged my Discord community to write the HTML for a simple-looking card component type thing, and despite the simplicity of it, the results were incredibly varied, which begs the question: if HTML is so easy, then why did we have so many different solutions?
📝 Quiz time!
Which of these CSS creates animations based on scroll-position?
- animation-timeline: scroll()
- animation-trigger: scroll()
- scroll-animation: timeline()
- timeline: scroll()
As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.
|
|
🔗 Other awesome stuff around from the web
🏁
Have a fantastic week!
Kevin
|
Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇
Beginner friendly (and free)
Conquering Responsive Layout
A free course to help you approach responsive layouts with the right mindset.
Enroll →
|
|
Intermediate
CSS Demystified
For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!
Enroll →
|
|
Advanced
Beyond CSS
An advanced course that dives into project architecture, theming, design systems, and more.
Enroll →
|
|
