Post

The other day, a friend asked for help debugging some CSS in a side project he was helping out with. A complicated piece of UI was busted. Turns out, a component he was using had been updated, and now had a few internal divs for utility flex styling that blew up his own layout. #webdev #html #css

A few takeaways. 1. Be careful updating the markup of shared components. Adding markup can wreck someone else's selectors that expect a particular pattern. Ideally, you bump your library's major version. But if that isn't feasible, or you're not using a library, make sure to test your use cases.

3. If you're adding layer upon layer of flexy divs just to achieve a 2D layout of rows and columns, just write your own CSS grid. Flexbox is awesome, but understanding its limits and where, when and how to use CSS grid is part of the job. Play a round of code golf and get rid of some extra markup.