There’s a broader point here about declarative design:
Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.
I like to think of CSS as a conditional design language.
Yes! This is exactly what I’m talking about with declarative design!
Read on for some fantastic examples. And also, Ahmad makes a comparison between CSS and Figma, pointing out that the conditional, declarative possibilities currently aren’t available in graphic design tools.
I did not know about box-decoration-break—sounds like a game-changer for text effects that wrap onto multiple lines.
Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.
Hear, hear!
If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
Here’s a remarkably in-depth timeline of the web’s finest programming language, from before it existed to today’s thriving ecosystem. And the timeline is repsonsive too—lovely!
Well, now I’m really glad I wrote that post about logical properties!
We’re not there yet. So how do we get there?
Well, I don’t know for sure – but articles like this are very helpful as we try to work it out!
Dave rounds up some of the acronymtastic ways of scoping your CSS now that we’ve got a whole new toolkit at our disposal.
If your goal is to reduce specificity, new native CSS tools make reducing specificity a lot easier. You can author your CSS with near-zero specificity and even control the order in which your rules cascade.
A terrific tour of just some of the fantastic ways you can use :has() in CSS.
The section on using it with sibling selectors blew my mind:
How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.
h2:has(+ p) { margin-bottom: 0; }Amazing.
Prompted by my recent post about using native button elements, Trys puts forward a simple explanation for why someone would choose to use a div instead.
The one common feature between every codebase I’ve encountered on that doesn’t use
buttons well, is a bad CSS reset. Developers try to use abutton, and find that it still looks like a native browser button, so they grab a plain old, blank canvasdiv, and build from there.
Occam’s Razor makes Trys’s explanation the most likely one.
I love these notes on my recent talk!
Here’s the video of my opening talk at this year’s CSS Day, which I thoroughly enjoyed!
It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!
A really deep dive into flexbox. This is a great example of what I categorise as “thinking like a browser” (a skill I recommend for any front-end developer).
This is a really in-depth explanation from Bramus of the upcoming @layer rules in CSS, from the brilliant minds of Miriam, fantasai and Tab.
Basically, you’ll be able to scope styles, and you get to define the context for that scoping. So all those CSS-in-JS folks who don’t appreciate the cascade will have a mechanism to get encapsulated styles.
I can see this being very handy for big complex codebases with lots of people on the team.
This is a great tutorial—I just love the interactive parts that really help make things click.
This detailed proposal from Miriam for scoping CSS is well worth reading—it makes a lot of sense to me.
Until there is movement on developers taking CSS more seriously and understanding its full capabilities, we are caught in an awkward loop where introducing too much complexity in your project’s CSS will do more harm than good.