Hello Reader,
Have you ever found yourself staring at some CSS that you were sure should work, but it wasn’t doing what you wanted?
If so, welcome to the club 😂.
These days, for me, it’s less about not understanding a specific behavior and more about making dumb mistakes, but there are times when it still catches me off guard as well.
At this stage, most of the time I can reason my way out of the problem I’m facing, but with years of experience in both writing and teaching CSS, it helps me on that front.
I hear a lot of stories from people who say that, even with experience in front-end development, they still second-guess themselves a lot or get stuck on what feel like trivial problems.
From what I can gather, one of the main problems is that people learn CSS backwards.
In other words, we learn the properties and values, and what they do, but not the core principles on which they're built.
At least, that’s what I did way back in the day, and the problems I see people running into are similar to the situations that I’d run into (though they get to do it with Flexbox or Grid instead of layout hacks 😂).
A lot of JavaScript courses and materials cover the fundamental principles of the language before moving on to topics like DOM manipulation, whereas with CSS, we just dive in and start making pages look pretty.
Part of that comes down to CSS not being able to do anything other than make pages look pretty, whereas with JavaScript, we can console.log() our way through some of the foundations first.
But CSS has a lot of fundamentals beyond the box model and the cascade, and understanding those helps unlock better ways of writing it.
For example, while stacking contexts can be a little annoying to work with, most people are aware of them, but a lot of people aren’t aware of formatting contexts and layout modes.
We know things change when we declare a display: flex but many people don’t realize the other changes that can come with those types of changes.
In my interview with Josh Comeau, he said that in his experience, the mindset shift that has things click for most people is when they start seeing it as a collection of different layout modes (that link goes to the timestamp where we’re talking about that).
And another thing that doesn’t get talked about enough are things like containing blocks, which are a big topic when it comes to positioning, as I explore in this video where I look at how you can use position: absolute without running into responsiveness issues.
But talking about these in the abstract is one thing… I’m curious what your current biggest CSS head-scratcher is!
So, if you’ve got something you can’t figure out right now, I’ve set up a one-question form right here (I’m using a form instead of asking you to reply to this email to keep my inbox under control!).
I’m going to read through them all, try to organize them by the “type” of issue that it is, and pull some out as examples to explore in next week’s newsletter.
🙋♂️ What I’ve been up to this week
The single most annoying thing about CSS
There are a lot of annoying things in CSS, but transforms not working on inline elements takes the cake, at least for me.
⚡ Quick tips of the week
|
|
🎙️ Podcast
Is shipping broken products the new normal?
In this week's episode of General Musings, I discuss the frustrating trend of shipping broken products, with a focus on Figma Sites and their current shortcomings. I also dive into the topic of AI and the hype surrounding it, as well as the challenges faced in the gaming industry.
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB
|
|
🔗 Other awesome stuff around from the web
🔌 Shameless Plug
As you might know, my Professional CSS course is on Frontend Masters, and they’ve also added a new Tutorials section to their site where I’m creating 1-2 exclusive tutorials per month for them as well. You can see the content I have with them, plus you get a lot more than just that if you do decide to sign up with them.
You can use the coupon code POWELL to get 25% off your first month.
🏁
Have a fantastic week!
Kevin