- February 25, 2016
Expressive Type for Copy Blocks
How many times have you been coding a navigation and found yourself overriding the default padding on a list? Or, have you ever dove into a teeny tiny “product meta block” only to find that all your paragraphs have this ridiculous default font-size of 16px? What do you do? Well, you do one of two things… you override everything or you set more simplistic defaults.
When overriding everything we find ourselves writing markup such as
.product-meta p or, worse yet,
.product-meta p, .product-meta ul, .product-meta ol, .product-meta omg…. This is all so that we can take our system defaults and tailor them to this very specific implementation. The downside here is that our overrides are only as generic as we allow them to be. If we forget to put
blockquote in our list of overrides then you can forget about using a blockquote in your
.product-meta element. This is less than ideal and inevitably causes 11th-hour “fixes” to support additional markup patterns you maybe didn’t consider during design and/or development.
The flip side of the override everything approach is to explicitly define everything. In this way, the
ul, ol, p, etc… all have “simple” defaults that will not include margins, padding, or any implied formatting. This fixes our
.product-meta issue because there’s nothing to override. It also makes our
.product-meta code shorter because we’re not wasting CSS selectors overriding system defaults. Where we run into issues with this approach is when we actually do want the implied formatting of a
ul, ol, p, etc…. For example, within the middle of a blog post we do want our lists to be indented and our paragraphs to be spaced out. With simple defaults, you’re forced to add classes to your paragraphs to get the spacing you want.
Merging a bit of both approaches I’ve been using a
.copy-block to represent any content that should have the formatting you’ve come to expect with something like a blog post or press release.
With this approach, my overall system can have simple defaults and zero out, literally, everything. No margins on anything, no paddings on anything. Line-heights of 1em everywhere. This means there’s never any overrides. Instead of tearing down the cascade to build it back up all our CSS is written to build up a pattern.
Layered on top of the simple defaults is the
.copy-block class, which I use to wrap any text (commonly coming out of a CMS’s WYSIWYG). Within a
.copy-block we set all the defaults we would want on our unclassed elements. In this way, a UL doesn’t need a class to get sensible defaults. But, at the same time those sensible defaults aren’t applied in places, we don’t specifically want them.
This approach layers nicely on top of Allison’s approach to type, leveraging expressive “type classes.” Within our
.copy-block can set a naked
h1 to use
sans-xxlwithout fear that the
sans-xxl class needs to override the default styling of the naked element.
Understandably, this approach isn’t for everyone. Your HTML will contain a lot of
.copy-block classes. If I were re-coding Cognition today we’d use a
.copy-block for this main body, for the text within the recent case study, the event description. And a year from now if we wanted to add a testimonial, I’d use it there too, because it’s just that flexible.