Every Layout: Relearn CSS layout, by example

Author Heydon Pickering
Published 2019
Pages 243
Links Goodreads


February 26th, 2021–March 31st, 2021


Big-picture CSS architecture is one of the biggest holes in my web knowledge. When I saw Heydon Pickering and Andy Bell (both of whom I've read for years) wrote a course/book about it together, it was an easy buy.

The world wide web is an amazing space. A philosophy espoused by Heydon and Andy (and all my favorite web evangelists like Jeremy Keith and Baldur Bjarnason) that resonates with me is: go with the grain of the web. There are powerful defaults in how browsers interpret HTML and CSS; use them. Instead of avoiding the CSS cascade, say, learn how it works and use it to write less code.

Another way to write less code: identify re-usable patterns. This book is (currently) 12 layouts you've probably implemented over and over, like The Sidebar and The Icon. The authors explain how they built a generic implementation of each pattern, along with the code and examples.

The book starts with more basic topics like Units and Modular Scale that are helpful if you're starting out and a great review otherwise. This section and the first pattern are available free at https://every-layout.dev, so at least give those a read if you're interested in the topic.