hey, nice article, I found a couple of 'golden rules' when it comes to setting up my stylesheet that I think you might find helpful.
Firstly, absolute units are the way of the sith...relative units are what we jedi use. This means where at all possible use viewport units (v/min/max/w/h) or element mesurements (r/ems) %'s can be tricky sometimes but they work. The odd execption would be when setting values for border size and box-shadow effects cause they use px's as part of their applied function.
Another would be to set the font-size in the root of your html to be responsive, best way to do this is :root{font-size:calc((0.5->1)em + (0.25->1)vmin/w) those are the range of values that best work I have found. From there set your HTML elements to have rem font sizes for each tag you want to have controll over. Another would be also setting the page dimensions using only vw and vh using vmax and vmin is often troublesome.
If you are using a CSS preprocesser like SASS or LESS you can work your media queries straight into the class selectors instead of having to write your media queries elsewhere on the stylesheet, (saves alot of time going backwards anf forwards over sometime very large stylesheets).
With images, and more in general just maintaining aspect-ratio for boxes there has been a bit of hackery but conventions seem to be aligning and hopefully we can see the aspect-ratio:16/9 be more widely adopted by the other vendors. There is a bit more I could go into but those have kept me towards the light and away from the dark more insidious forces of the CSS underworld....