With the new times using javascript for everything on the frontend (React.js, Angular.js) CSS is targeting more and more modular coding.
This is why if you are progressing in CSS you should learn BEM naming conventions.
A common problem I found is the designer use REM units for everything (or even worst PX) because they fear if you use relative units it will be affected by the context, and they want the css rules to be as standalaone as they could. There is a mayor problem with this approach because if you create different sizes of the same component, or you want to change the layout you have to rewrite all the sized attributes. This means more code, more complexity, hard readability…
The solution is to use REM units in the parent and use EM in everychildren, so when you make only a big mediaquery in the body and it will adapt itself all the way down in the body.
Check out this example code I made in codepen.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KqXbWr” default_tab=”css,result” user=”pikilon”]See the Pen <a href=’https://codepen.io/pikilon/pen/KqXbWr/’>CSS relative units in component layouting</a> by Pikilon (<a href=’https://codepen.io/pikilon’>@pikilon</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]