Understanding Layout Algorithms
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties to calculate layouts. In this blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it effectively.
A few years ago, I had a Eureka! moment with CSS. Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center . I figured that if I understood broadly what each property did, I'd have a deep understanding of the language as a whole. The key realization I had is that CSS is so much more than a collection of properties. It's a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms. It's not enough to learn what specific properties do. We
saved by
related reading
- An Interactive Guide to Flexbox in CSS • Josh W. Comeaujoshwcomeau.com
- CSS polyfills from the futuregss.github.io
- How to organize CSS @ 9elements9elements.com
- How to Write a Flexbox Layout Engine - tchayen.comtchayen.com
- Flexbox | Codropstympanus.net
- A Complete Guide to CSS Concepts and Fundamentalstania.dev
- Cheng Lou on X: "My dear front-end developers (and anyone who’s interested in the future of interfaces): I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at https://t.co/BKnwCDIp75" / Xx.com
- Inside Framer's Magic Motionnan.fyi
- Visualizing Algorithmsbost.ocks.org
- The CSS behind Figmaishadeed.com
- Say precisely what you mean.index.how
- A Complete Guide to CSS Flexbox | CSS-Trickscss-tricks.com