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
- The Importance of Learning CSS • Josh W. Comeaujoshwcomeau.com
- A Complete Guide to CSS Concepts and Fundamentalstania.dev
- The CSS behind Figmaishadeed.com
- How To Learn Stuff Quickly • Josh W. Comeaujoshwcomeau.com
- Inside Framer's Magic Motionnan.fyi
- Common CSS Flexbox Layout Patterns with Example Code | Tobias Ahlintobiasahlin.com
- How to organize CSS @ 9elements9elements.com
- Visualizing Algorithmsbost.ocks.org
- How to Write a Flexbox Layout Engine - tchayen.comtchayen.com
- CSS polyfills from the futuregss.github.io
- A Complete Guide to CSS Grid Layout | CSS-Trickscss-tricks.com