Hobby Sites and Modern CSS
The joy of a hobby site is that the stakes are so low you could roll over them. You are your own client; therefore the chain of communication is very short. And there’s no pressure from deadlines! You don’t even have to launch the thing in the end if you don’t feel like it. This is a perfect time to throw some new ideas at a larger scale project and take them too far.
Everything is a feature; nothing is a bug.
On my latest hobby site, I wanted to play around with some of the incredible CSS that has been landing in the last few years.
Here’s an overview of my impressions so far:
Top 3
Cascade Layers
I want to use cascade layers everywhere, immediately. For backwards-compatibility, I would need a polyfill or careful consideration of how to support older browsers before incorporating this into professional work. But holy smokes, this is my new favourite thing!
Cascade layers allow you to organize your style architecture in new ways, wiping out concerns about specificity and order of appearance for rules in different layers. Those criteria only apply within the same layer.
@layer component, state;
/* by order of appearance rules, I would be overruled */
/* by cascade layer rules, I am applied! */
@layer state {
button[aria-disabled='true']:hover {
filter: none;
}
}
@layer component {
.button[data-variant='primary']:hover {
filter: saturate(200%);
}
}
You can even import a stylesheet into a layer, which means notoriously fickle vendor styles can be neatly slotted into a “vendor” layer, where you don’t have to worry about the fact Vendor X decided to select everything by ID.
@layer vendor, author;
@import url(vendor.css) layer(vendor);
@layer author {
// everything in here beats vendor specificity
}
Styles can also be appended to layers, so you don’t have to define them all in the same place at the same time. I broke up my “variant” layer into specific variant blocks, which made it really easy to focus on the one I was working on at the time.
Cascade layers are wonderful but also intimidating. How do you choose what layers to define? In what order?
These are difficult questions to answer at the beginning of a project when you have no experience to draw from. But it’s impossible to gain experience if you never try anything new. I changed my approach several times along the way and ended up with a much better understanding of how I would answer those questions for my next project.
Learn more about cascade layers with Bramus Van Damme
Subgrid
This long-awaited feature finally became available in all evergreen browsers as of September 2023. Thanks, CSS Interop!
For me, the exciting thing about subgrid is its “breakout” possibilities. You can create a grid and position most everything in a column of that grid, but then use subgrid to push an element outside the bounds of that column.
A common use case for this is moving from container to full-bleed width.
A less common use case is what I wanted to do: create a two column layout, with the second column containing a sticky element that used to be embedded in the first column on smaller screens.
It’s a fun feature to play with and I’m looking forward to seeing what kind of designs this inspires.
Learn more about subgrid with Rachel Andrew
Container Queries
The first thing you’re going to want to do with container queries is make style changes to the container itself and you can’t do that. The implementation may seem quirky at first, but there’s good reason for it (see Miriam Suzanne’s CSS day talk for details).
I knew early on I wanted to use container queries as much as possible because I wasn’t working from a planned design. Re-adjusting media queries every time I moved things around in the browser was not a pleasant prospect. A lot of component layout has nothing to do with page width but how much space the component happens to take within a particular context. The idea I could set up components with container queries and then toss them into whatever context struck my fancy was very appealing.
In practice, I wasn’t as enamoured with container queries as I thought I would be. I spent a lot of time debugging. But it was very satisfying to finally see that little “container” badge show up in the dev tools and have a new tool in my responsive web toolkit.
Learn more about container queries with Ahmad Shadeed
Honorable Mentions:
TL;DR
There’s a lot of new CSS out there and hobby sites make great playgrounds. Filling in your mental model of a new specification is a side benefit. Coding for fun and curiousity is a worthwhile end in itself.