Hello Reader,

I have two sons, who are now 10 and 13 years old now (time flies!).

Raising them is surprisingly a lot like writing CSS, where something works when you try it in one situation, only to be frustrated when you try it again somewhere else and it no longer works the same.

Like, I can get one of my kids to clean their room, including doing a great job dusting it and wiping everything down with just a small amount of convincing*, whereas the other one just hides everything in the closet and claims he did a great job.

(*bribery)

It’s a bit like in CSS, where you might feel like if you declare width: 1000px on a selector, anything using that selector should be 1000px wide, only for it to work in some situations but not others!

• If it’s an inline element, it’ll ignore the declaration completely
• If it’s a flex item, it might be 1000px wide, but in many situations it won’t be

I talked with Josh Comeau a little while back, and he brought up how one of the things that helps his students “get” CSS is when they realize that when we change layout modes (either through changing the value of the display or position properties), that the algorithm for that element, and potentially it’s children, also changes.

There are all sorts of situations where things change how they work depending on the layout mode being used, like the width example I gave above.

And to make it even more complicated, sometimes those changes impact the element itself (display block vs. inline), and other times, the declaration has a bigger impact on it’s children (display flex and grid).

Add on top of that what I talked about last week, where the user has final control over everything, and that there are tons of unknown variables that we’re having to deal with, and you can quickly see why people get frustrated with CSS.

But building on what I talked about from last week, where I said “Instead of forcing the issue, we need to write code that can adapt to whatever is thrown at it,” when we understand that the algorithm changes when we change layout modes, then we expect there to be differences, which make things a lot easier than expecting it to work one way, and one way only.

Just like raising my kids, the more CSS we write, the more experience we gain, which helps make things easier when we run into problems or are thrown into an unknown situation.

However, sometimes the wheels will come off, and we need to adjust on the fly instead of expecting our pre-existing expectations to hold true in every situation.

As we gain more experience (with both parenting and CSS), we learn that mastery doesn’t come from controlling everything but from building up an intuition for how things might work in any given situation and knowing we might need to adapt.

And also, sometimes all we can do is try something and hope for the best 😆.

🙋‍♂️ What I’ve been up to this week

I had an April Fools video go out on the 1st. It was titled “The Ultimate Guide to Tailwind CSS” and the first minute of the video were the introduction to that, but then “i got distracted” by a new CSS feature that’s being worked on, CSS-only carousels.

If you avoided the video because you thought it was a Tailwind video, or you hadn’t seen it, I’ve cut out the beginning of it, and it’s now just focused on the carousels, which were impressively easy to set up.

​

CSS Battle against Andy Bell

​

It’s been a long time since I’ve done a CSS Battle, and now that they have a versus mode, it seemed like a great time to do another one!

⚡ Quick tips of the week

• YouTube Short: :focus gets focus states wrong​
• HTML & CSS Tip of the week: The <q> element</q>​

🎙️ Podcast Finding motivation for the things that aren't so fun This week is a slight detour from our usual frontend development discussions, as I explore how finding enjoyable activities can make less pleasant tasks more manageable. ​ LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​

​

🔗 Other awesome stuff around from the web

• ​Item Flow, Part 1: A new unified concept for layout​
• ​First Look at The Modern attr()​
• ​First look at custom functions in CSS​
• ​Getting Started With Style Dictionary (10-part series on using Style Dictionary)
• ​Simplify sharing with built-in APIs and progressive enhancement​
• ​UI Fonts​

🏁

Have a fantastic week!
Kevin

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205