I've noticed that the JavaScript media query seems to take effect after the CSS equivalent ones.

I've created two examples demonstrating what I'm talking about:

First example

HTML:

<div class="foo">
  bar
</div>

CSS:

.foo {
  background-color: orange;
}


@media(max-width: 300px) {
  .foo {
    background-color: blue;
    transform: translateY(100px);
    transition: all 300ms ease-out;
  }
}

jsbin link is: here

Here transition happens, when screen width becomes 300px or less from something bigger.

But when creating responsive design such transition can be annoying. I'm trying to get rid of them. The following Javascript and CSS solves the problem, but I'm not sure that is it reliable or not.

2nd example

HTML

<div class="foo">
  bar
</div>
<button>toggle translateY to 200px</button>

CSS

.transition {
  transition: all 300ms ease-out;
}

.foo {
  background-color: orange;
}


@media(max-width: 300px) {
  .foo {
    background-color: blue;
    transform: translateY(100px);
  }
}

.translateY {
  transform: translateY(200px);
}

JavaScript:

const w = window.matchMedia("(max-width: 300px)");
const div = document.querySelector(".foo");
const button = document.querySelector('button');

function fun(e) {
  if (e.matches) {
     div.classList.add('transition');
  } else {
     div.classList.remove('transition');
  }
}

// for initial screen width change detection
fun(w);

w.addEventListener('change', fun);

button.onclick = function() {
  div.classList.toggle('translateY');
}

jsbin link is here

Here it seems the following thing happens in order when screen width becomes 300px or less from something bigger:

1. CSS transform: translateY(100px) is rendered in a flash.
2. transition class is added to div by JavaScript.

By clicking the button, it makes sure that the transition class is working.

This example doesn't cause any unwanted transition as screen size becomes 300px or less from something bigger.

So it seems that any CSS media query is rendered before JavaScript equivalent media queries. I think it's a good thing. But I'm not sure, is it the standard well supported behavior? Is it safe to build logic based on this behavior?