DEV Community

Ivan Jeremic
Ivan Jeremic

Posted on • Edited on

2 1

How CSS Media Queries should work in the Browser.

This is how Media Queries currently work in the Browser.

.nav {
  background-color: #f40
}

@media screen and (max-width: 992px) {
 .nav {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .nav {
    background-color: olive;
  }
}
Enter fullscreen mode Exit fullscreen mode

And this is how I think CSS Media Queries should work in CSS.

body {
  breakpoints: {
    sm: 30em,
    md: 48em,
    lg: 62em,
    xl: 80em,
  };
}

.nav {
  background-color: { sm: olive, md: olive, lg: blue, xl: blue };
}
Enter fullscreen mode Exit fullscreen mode

No code duplication.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay