Daniel Mall’s excellent Content & Display Patterns article talks about the importance of decoupling content and design.
Content patterns are established first, independently from the design. Next, designers create display patterns with various pieces of content. Last, it is up to the developers to “create the hooks for content patterns to flow into the display patterns appropriately”.
CSS is entirely concerned with display, yet in the pursuit of being “semantic” we often permeate our stylesheets with content references.
<div class="event"> <h1 class="event__title">Star Wars: The Force Awakens Premiere</h1> <p class="event__date">Dec 20, 2015</p> <p class="event__location">Ritz East, Philadelphia PA</p> </div>
Developers understand the importance of modular design systems. 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.
<div class="abs pos-bottom pos-left text-white pad-2"> <h2 class="text-reg pad-2-top">My Great Event</h2> <span class="bold">February 17-20</span>
Some front end developers have a strong negative reaction when they see markup like the above, but many others have been using this or similar approaches in their work for years.
For individuals weaned on an ideology where “semantic HTML” means using content-derived class names (and even then, only as a last resort), it usually requires you to work on a large application before you can become acutely aware of the impractical nature of that approach. You have to be prepared to disgard old ideas, look at alternatives, and even revisit ways that you may have previously dismissed.
From About HTML Semantics and Front-End Architecture by Necolas Gallagher
- Building and shipping functional CSS
- Naming CSS Stuff Is Really Hard
- Defending Presentational Class Names
- Why Avoid Non-semantic Classes? Because They’re Non-semantic!
- Challenging CSS Best Practices
- About HTML Semantics and Front-End Architecture
- Contextual Styling: UI Components, Nesting, and Implementation Detail
- Using Helper Classes to DRY and Scale CSS
In the examples below, I demonstrate how one can use the Expressive CSS approach to build a layout like the one featured in Dan’s article .
The benefits of building the layout in this way were:
- Maintained separation of content and display by keeping content references out of the CSS.
- Able to quickly build the layout while writing almost no new lines of CSS.
- Simple to create a responsive version even though no phone or tablet layout were provided because responsive utility classes make it easy to experiment.
For more information on the principles and benefits of using this approach, check out the Expressive CSS Project Page .