Layers are good, especially for laying in ground rules with low specificity. The more rules you can declare in that respect, the less you end up with cluttering the more specific rule sets.
It will take some reading, but it would good to understand inheritance in terms of what can be inherited from a parent, and what cannot be. That means going through the property list and looking for that detail. Perhaps there are lists of these things, (you’d think) but for sure it will be in the specs on W3C or MDN.
The body should not have too many actual style properties, imho. A background color of white, foreground color of black, base font size of 100% (or 1rem if the html selector has the base font at 100%); margin 0, padding 0, and that’s about it.
Plan first for a desktop version and don’t put any thought into mobile or tablet. Sketch what you expect in terms of page blocking, and give each of the main components an id. Again, the less those components have to deal with style, the better. Position and dimensions, border, margin, padding, that’s about it.
Now what you put into those component frames is the layer to begin styling. As any of this goes, the best practice aspect is more geared to coding practice, D.R.Y., etc. There are no hard and fast rules when it comes to design. There are, however, ways that are easier to maintain, and others that are not. I think that is something to focus on moving forward.
I’m a big fan of traversal but we see less and less of that in lessons. It’s usually id this and class that. There are ways to keep this to a minimum if we have thought our layout through and built it up in the layers, as you suggest. If that is your idea, then I’m already your fan.