Nested divs are not a flexbox crime and I'm tired of pretending they are
Everyone in the comments keeps saying to flatten your markup before you even touch CSS, but my little lighthouse scene has 60 nested divs and it renders clean in Chrome and Firefox at 3 breakpoints. Naming the layers and using direct child selectors took me about 20 minutes, way less time than rewriting the DOM would have. Does anyone actually notice a load or layout difference with deep nesting, or is this just a habit people repeat?