For years we’ve been talking about separating JavaScript from HTML, and CSS, but there’s always a temptation to continue writing HTML and CSS into the wrong parts of our content management systems. I wasn’t willing to say this before, but it’s a design problem. And it really is a tough line to walk.

For as long as I’ve used a content management system, someone has tried to get me to write HTML into it. I’m not talking about the CMS’ template feature. Do that. But I mean specifically inside articles or page content.

It may seem like a good idea at the time to write:

<img src="something.jpg" alt="This is an image of something" class="go_full_width float_left" style="border: 1px solid #fff;" width="960" height="320" />

But what happens in two years when you redesign your site and you don’t remember to remove the class “.go_full_width”, or the border on the image? Or what if you need to resize that image with CSS for some reason? Well, you have to go back through all your articles and take that stuff out.

It’s a pain, trust me on that one. The bigger the site, the more headache it is.

Why Is It a Design Problem?

It’s easy to blame the person who drops that HTML into the CMS, to point fingers for doing it “the wrong way”. Personally, I think it comes down to neglect on the design side. It may not seem like it from the example above, but consider the case of someone trying to create columns of content in a WordPress article page, or declaring a million styles about text formatting and colors. That almost always comes from expectations laid out in a design.

It’s a design problem because we didn’t consider how the chosen CMS actually works.

For the most part, a CMS typically has one space for content per article or page. As a result, you only get one chunk of content to drop on your page, typically in the main content section. But yet we create designs with interesting and non-versatile expectations of how that one block of text is going to be presented from the CMS. Maybe it’s as simple as perfect columns of varying widths, or that the third column is floated right and smaller to imitate a pull quote.

My rule of thumb going forward, will be to only design what can be accomplished through external CSS using minor classes and semantically meaningful tags. (So giving a paragraph the class of “pull_quote” is fine.) If on a particular project I’ll be using a CMS that does allow me to split content up or add extra boxes for different things, then I’ll have to consider their best use before I design anything. I would still very likely err on the side of simplicity, because you don’t want to have to go back through every page to merge various fields together again.

How Do We Solve It?

I recommend using a unique identifier to give your stylesheet something to pick up for styling. In Textpattern and WordPress there are custom fields, for example. You can enter a value and it’s ready for you at the template level.

When you create your template, find those values and put them on a div, or any container, so that you can write styles against it. Here’s an example from Textpattern:

<div id="main_content" class="<txp:if_custom_field name="is_divided">divided</txp:if_custom_field"> 
// Content goes here, probably lots of it.
</div>

So what does that do? First, it looks for the custom field named “is_divided”, and just checks to see if there’s a value in there. If there is, it adds in the divided class. In this particular case, that tells my CSS to apply these styles:

.divided {
	-moz-column-width: 20em;
	-o-column-width: 20em;
	-webkit-column-width: 20em;
	column-width: 20em;
	-moz-column-gap: $margins;
	-o-column-gap: $margins;
	-webkit-column-gap: $margins;
	column-gap: $margins;
	padding: 0 40px 0 60px;
}
.divided p {
	margin-left: 10px;
	margin-right: 0;
	padding-right: 0;
}
.divided p:first-child {
	margin-top: 0;
}

All from the safety and confinement of the CSS file, which I can adjust to my heart’s content. A more advanced way to do this would be to request an extra stylesheet entirely. However, it’s probably more useful to apply a body class and just distinguish between the added styles in your master CSS file.

So there you have it, a quick way to help avoid the need for HTML and CSS in your content management system.