When I started learning CSS, I hated it to the core as I didn’t understand it at all.
As CSS is very flexible with multiple solutions to the same problem, I didn’t know where to start and where to stop.
But after building multiple projects over the quarters with below technique, I feel super confident about CSS now.
Please review and let me know your thoughts on this technique which I feel is the “best” way to style any complex design
I’ll highly recommend to use above technique and see the difference with your other ways of styling.
Usage of Grid template area is like playing Jigsaw Puzzle Game where you first cut design into appropriate pieces and then place pieces in place with template area names.
With BEM I could play around spacing without worrying about breaking things randomly, in fact I can confidently say BEM is life saver
I did struggle with placement, spacing etc as it was my earlier projects but this technique makes me think differently than flexbox styling, I can avoid position totally and do much lesser padding, margin etc as well
BEM makes your think in React way ( components )
Thus I feel BEM and Grid are the “best” and “life savers” for any new & existing developers.