I saw that you can change styles with the CSS @media Rule, and you can also add window.addEventListener('resize', handleResize); in your javascript to change your document depending one its size.
Is there any difference and should you use one over the other? Or are they interchangeable?
If you can do something in pure CSS, avoid using JavaScript.
I thought this was always true, but surprisingly from what I read, it is not always true especially when we speak about animations :
In most cases, the performance of CSS-based animations is almost the same as JavaScripted animations — in Firefox at least. Some JavaScript-based animation libraries, like GSAP and Velocity.JS, even claim that they are able to achieve better performance than native CSS transitions/animations
-- MDN
An other interesting link about CSS vs JS : SO : Should I avoid JS when possible and use CSS instead?
For classic uses (change mobile, tablet and desktop view), pure css is more efficient with media queries.
I'm hoping for new answers and get more informations about when prioritize JS than CSS.