No Time Dad

A blog about web development written by a busy dad

Thoughts on CSS Intrinsic Design and Avoiding Media Queries

I can’t account for every viewport size with media queries. I realize this isn’t a profound revelation for experienced frontend developers, but more and more it’s a problem that’s been bothering me. I’ve always felt there has to be a better way, but I don’t think I’ve figured out what it is yet.

The truth is that I don’t mind writing one or two media queries. The problems begin for me when there are more than a few of them. It’s hard to keep track of which media query is doing what. Using dev tools helps, but debugging css with lots of breakpoints still feels difficult for me.

Lately I’ve been trying to use less media queries and rely instead on things like intrinsic layouts and percentage based layouts. These have their own set of problems though.

Take the css grid definition below as an example. This is a classic example of an intrinsic layout. It’s not a complex example by any means, but there are some css functions and keywords being used that you’d need to know the definition of to understand. I’ve removed the complexity of multiple media queries but added the overhead of what I’d call “intermediate” css knowledge. Which isn’t terrible.

main {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

I’m going to continue working on building layouts without media queries as much as possible, and where it makes sense. More than anything I think it’s an interesting problem to work on. It challenges me to dig a little deeper into the corners of css I haven’t looked at before.

I don’t want to be too dogmatic about not using media queries either though. I do think they have their place. And I also think it’s easy to go down the rabbit hole of trying to avoid them completely. It’s possible to write some pretty complicated min, max, clamp, repeat, or any other css function to replace a media query. Which only adds more complexity to the code.