Skip to main content

SMACSS for Your Content

05-05-14 Emily Gray

Content planners and strategists can steal rules from SMACSS development to better manage content—and you don’t even have to learn code.

Content people have been talking about content chunking for awhile now. It’s cool. It’s fun. It solves all your problems... only it doesn’t. Jeff Eaton pointed out that there are some serious flaws with content chunking, especially when it comes to creating a narrative flow. Chunking everything just leaves you with a different headache than before. But there is a happy middle ground, and it’s not that different from what developers are doing to create clean, reusable, and modular code.

What is SMACSS?

The brain-child of Jonathan Snook, “SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.”

Hmm. “Fit rigid frameworks into flexible thought process”? “Document a consistent approach”? I don’t know about you, but to me that kind of planning sounds a heck of a lot like what content strategists are trying to acheive too—which got me interested in better understanding just how our developers approach SMACSS (and also other approaches like Atomic Design). Here’s what they had to say...

Thanks to Marshall Norman and Philip Zastrow for the discussion.

How to Approach the Chunking Decision

The guys told me, “To build modularly, you go at it with everything at first.” I’ve been using a content priority guide, to get my hands around all the content on a site by outlining all the content types that belong on each unique page. Common content types you’d find in an Article include Title, Author, Summary, Image, Caption, etc. I start by creating a priority guide for each unique template on a site (i.e. Homepage, Section Page, Detail Page, Article Page, etc.). I work with clients to make sure I understand what the pages need on them to be successful, and we gather all the content types in a Google Doc in priority order. This step gives us a really good understanding of the content on the site and how it all lives together.

Marshall and Philip also told me, “When you start to see repetition, pull out the repeating part and have it become a separate thing.” The more templates I create in the content priority guide, the more repeated/shared content I can see living on the site. Those Authors I need to mention for Articles will probably be repeated on different Articles, and we might even have a page devoted to details about that Author. After I’ve done a few, I start to realize what content types, like Author, actually need to become separate chunks. If you allow yourself to only break something off when it needs broken off, you can keep things a lot simpler—not only for planning the site, but also for content creators inputting content into the site later. This approach makes you focus on the whole of the site while deciding the bits and pieces.

How to Keep it Not Gross

The allure of beautifully chunked and reusable data is glorious, no matter if it’s code or copy. But, like with most approaches, starting to implement can get out of hand fast. Spreadsheets and planning guides can get super gross really quickly, especially if you’re obsessed with getting all the chunks broken out right away. You’ll quickly find an approach where you’re fixated on the chunks stifling, and it could turn you off to the whole idea. That’s why you need to keep things “lean, mean, and digestible.” If you address the content that needs to be on each page and then worry about the repeating elements (like Author) as they come, you’ll see the chunks are there to help you keep things broken out that need broken out, and together that need to be together.

But what about the times when you have something broken out that needs to be referenced in a larger content piece like the body of the Article? You could come up with a few layout treatments that pull in chunks, but that does limit your writers. If maintaining the narrative flow of a piece is highly important, Jeff Eaton recommends you reference chunks right in the larger field using tags.

“If they’re meant to be reused across multiple pieces of content, make them freestanding content items in a CMS. Instead of relying on rule-based templates to position them, however, use placeholders like <gallery id=“1″ /> and <teaser article=“82″ rel=“rebuttal” /> right inside the narrative fields.” - Jeff Eaton

How it Helps Efficiency and Governance

Being able to reuse pieces you’ve already created is helpful, efficient, and more consistent no matter if you’re writing code or an Author Bio. You don’t have to go edit something in five places when an update happens and worry that you might have missed one, or spend as much time testing that everything updated correctly. In addition to just being a faster way to create things, it makes governance a heck of a lot easier. That’s one of the big reasons we went down the chunking road in the first place. It certainly has its limitations, but it still has a vital place in our content systems.

How it Will Make You Feel

Skillfully planning for site content will make you want to have a dance party with Will Smith and Jazzy Jeff. Give it a try.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development