Illustrating Separation of Concerns

Hi all! For fun, I just made a couple of pages to illustrate the concept of separation of concerns.

Let’s say I manage the website for a company called I18N4U, who provide internationalization services. Someone on the company’s marketing team has created a short blog post to explain what internationalization means to our prospective clients.

Here’s the post, all prettified with CSS.

You’ll note that I’ve separated my concerns by keeping semantics (meaning) in the HTML and style in the CSS. Terms are shown in italics, and emphasized words are in bold.

A couple of years and many thousands of blog posts later, the company goes through a rebranding. Instead of the old, traditional look, they’ve opted for some more modern fonts and styling, and even changed the company color from dark green to a cool blue.

Not only that, but they’ve decided that emphasized terms should now be italicized, and terms should be linked to an internal site search which brings up more blog posts tagged with the keyword (in this example, I linked to Google searches instead for simplicity). This requires a little tinkering with jQuery.

Here’s the new site after the rebranding.

The important thing to note is that, because I separated my concerns earlier, the changes were much easier to make, and will instantly apply across all those thousands of blog posts (after perhaps adding a link to that new .js file). In fact, the HTML between the two versions is exactly the same, and it still makes complete sense because I avoided naming any of my classes with words like .bold or .italic.

All feedback (but especially critical feedback) is welcome!