The tipping point for me was memorizing "A complete guide to flexbox" from the site "CSS Tricks" by using flash cards (Anki). The problems with CSS are: - A l

The tipping point for me was memorizing "A complete guide to flexbox" from the site "CSS Tricks" by using flash cards (Anki). The problems with CSS are: - A lot of features have been abused before there were good layout features in CSS. * - Errors are silent and you can repeat rules. - Selector specificty is a major fail in the language IMHO. * - Everything is global. * * An example: floating an image is an excellent way of wrapping text around an image. Inline blocks are excellent for inserting layout in the middle of text. Neither are ideal for creating a layout. Flex and grid has now fixed that however. What helps is to internalize the core concepts and to never "slap on another rule" when things just don't work. Start from scratch and update your mental model. * CSS-in-JS bypasses the issue of global selectors. And when CSS is localized, specificity becommes a none-issue. Check out styled-components for either React or Vue. When IE11 dies and Edge turns Chromium, shadow DOM will probably become the standard way to solve this.