Complex layouts can be broken down into smaller layout primitives that can be combined to build more complex structures. Thinking compositionally will open up a more practical and reusable way of creating layouts on the web.
What is composition?#
Composition, simply put, is when you build something greater than the sum of its parts. For example, an organism is composed of organs, which are composed of organ parts, which are composed of cells, which are composed of atoms. A musical composition can be broken down to nothing more than masterfully applying rhythm and tempo to 12 unique notes, creating all of our musical masterpieces.
Composition also applies to web layout. Complex layouts can be broken down into simpler "layout primitives," as described by Heydon Pickering. These layout primitives are single-purpose layout components that do one thing and one thing well. It is by strategically combining these primitives that we achieve more complex layout structures.
Layout without composition#
Let's take the below hero layout, for example:
Naively we might choose to do something like this:
There are several CSS methodologies like BEM, Object-Oriented CSS(OOCSS), or Atomic CSS that can help create more consistent class names and are generally useful in managing our CSS style sheets at scale. Unfortunately those methodologies can only get you so far.