Despite predating both Grid and Flexbox, Multi-column Layout represents—at least to me—an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even.
CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!
I’ve had a question on my AMA for a while: “Best ways/patterns to split app into components.” And this is my answer: “When you experience one of the problems above, that’s when you break your component into multiple smaller components. NOT BEFORE.” Breaking a single component into multiple components is what’s called “abstraction.” Abstraction is awesome, but every abstraction comes with a cost, and you have to be aware of that cost and the benefits before you take the plunge
I found myself in one of those famous Twitter debates the other day and off the back of it, I thought I’d create a short article about how we should should always consider context and caveats when we make bold statements. The context of that particular conversation was around a hot take that I’ll paraphrase: “Native buttons aren’t great and this one that has been developed is better and fully accessible”
You know that fear. The fear of changing something in your CSS. Only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked everything, and that you missed something. Not to mention that it’s amazingly boring.
Never fear again! Testing your CSS code, testing the visual aspects of your code, is now possible, and I will show how. A slew of new SaaS tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS).