Webmasters Gallery

John Polacek looks at a few examples where it’s possible to use small utility CSS classes to design the layout for a page in a method he describes as “Expressive CSS”:

Instead of creating CSS around content patterns, we could instead craft our CSS based upon display patterns. Expressive CSS is an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.

I’m not sure if John was the first to come up with the term “content reference”, but I like it. That’s where a chunk of CSS describes the content, like this:

<p class="event__location">Washington D.C.</p>

And then we’d use that single hook to style everything in CSS:

.event__location {
  border-top: 2px solid #eee;
  font-size: 23px;
  padding: 10px;
}

But John suggests to break those styles up into individual modules, that would end up looking something like this perhaps, where those same classes can be used on different modules throughout every part of the codebase:

<p class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">Washington D.C.</p>

As John mentions, this is not necessarily a new approach to writing CSS but it’s certainly interesting to see how another developer has changed their coding style with time and experience.

Direct Link to Article — Permalink

Content & Display Patterns with Expressive CSS is a post from CSS-Tricks