PRE-S: Sending this week’s newsletter out early this week, which I’ll talk about more of why a little further down.

Hello Reader,

I’m so curious about how some of the new CSS features that are coming out now are going to impact how we author our stylesheets in the years to come.

I think the one that might have the biggest singular impact might be the advanced attr() function, which finally allows us to use the values of data attributes anywhere in our CSS.

Beyond that though, we’re getting:

• mixins
• functions
• if statements
• probably more than I’m forgetting!

At first, these types of things will be used similarly to how we use the same features in pre-processors like Sass, but over time, I can only guess that we will push on from there.

I’m thinking about this because I was thinking back on how I used to use custom properties, and how it's evolved over the years.

Custom properties are essentially variables, and we’ve had them in preprocessors for a long time.

When I first started using them, I treated them in essentially the same way.

Eventually, I realized that locally scoped custom properties were amazing (they’re not as great with pre-processors because of the limitations they have being pre-rendered).

Using locally scoped custom properties changed a lot of how I used them, and I started using many local properties that I could override where needed.

And most recently, I’ve shifted to using a lot of fallback values, like var(--card-font-size, --base-font-size).

This sets the default as the base font size, but it's super easy to overwrite it with a modifier or somewhere specific.

If you'd like to see this approach in action, you can see me go all-out in my Bento Grid video from a few weeks ago.

This evolution of how I’ve been using them has taken years.

I realize others go there before I did, but it’s still one of those things where, unless we have a specific need, there is often no reason to change how we work, so we just keep on doing what we know.

Then, we either see someone else do something new or think of a clever idea and test it out, and slowly but surely, we make some progress in how we might use something.

And with so many new features about to be added to CSS, it’ll be fun to see where things go in the short-term, but also how different things might look after they’ve been stable for a little while as well, and the new patterns and workflows that come from them.

Also, if you'd like to see custom functions and mixins in action, I haven't had a chance to play with them yet, but Dmitry Mayorov has a video looking at each:

• ​Exploring @mixin in VanillaCSS​
• ​First look at Functions in CSS​

One thing I will say is that I know a lot of people worry that this explosion of new features will make CSS more complicated.

In a way, it does, but the nice thing is, they don't change the learning curve.

The basics are still the basics.

There are no breaking changes and new complexities for beginners.

f anything a lot of things are easier for beginners now that we have the correct tools for the jobs we need to do instead of relying on hacks.

There is more to learn, but if you have a strong foundation in the language, adding on top of that foundational knowledge usually isn't too bad 😊.

Speaking of keeping up with modern CSS, the reason why this week’s newsletter is going out a few days earlier is that I want to let you know that Miriam Suzanne is hosting a workshop on CSS Layouts.

The workshop is on building more resilient and maintainable web layouts using modern CSS, covering all the essentials, from block and flexbox to grid, subgrid, container queries, box alignment, and more.

The reason I’m sending this out today instead of Sunday is because there is a $100 early-bird discount running through April 12, and I didn’t want anyone to miss out on it.

This isn’t a sponsored slot or anything, but I know a lot of my audience could benefit from it.

I always love learning from Miriam because she knows CSS layouts at a super deep level (and has even helped write the spec for container queries), but is also able to explain everything in a way we can all understand.

If you’re interested, you can watch a little preview, or get more information and register for the workshop here.

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

How to set a max-column count using Grid auto-fit or auto-fill

​

Both auto-fit and auto-fill are amazing, but sometimes they keep making more columns when you don’t want it to keep making more.

Setting a max-width on the grid can work, but I don’t always want to limit that to be too narrow either, so I found a way to set a maximum number of columns!

It does take a little bit of work, but once we have the custom properties set up, it works well and is easy to modify as well.

Here’s the CodePen from the video if you want to poke around with the code.

⚡ Quick tips of the week

• Tip of the week: The min() and max() functions​

🎙️ 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

• ​Our interfaces have lost their senses (great read, and use of position sticky to aid in story telling)
• ​Tailwind’s @apply Feature is Better Than it Sounds​
• ​Better Anchor Positioning with position-area​
• ​Organizing Design System Component Patterns With CSS Cascade Layers​
• ​Ductility on the Web​
• ​The original Microsoft source code (interesting read, but also cool website)

🏁

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