How Can coServ Help to Apply the Separation of Concerns Principle

Photo by Markus Spiske on Unsplash

The separation of concerns principle is an important software topic because when it’s properly applied, the software quality can be effectively increased. There have been many nice articles explaining this principle, but not many doing it with easy to understand sample codes. So this article will focus on how the principle can be applied with a very simple example. The example will be a front-end one as the benefits of this principle can be easily shown.

Consider a novice front-end programmer who just gets on board. Without the help of experienced programmers, the beginner may write his/her HTML codes like this:

<div style="margin: 0 auto;">
  <h3 style="color: red;">My Big Title</h3>
  ...
</div>

It will work, but such programming style will inevitably produce codes that are difficult to read and maintain. So quickly the beginner learns to apply CSS rules and avoid directly mixing CSS styles into HTML codes. He/she may even learn about Bootstrap and start using it. The same HTML example could evolve into something like:

<div class="mx-auto">
  <h3 class="text-danger">My Big Title</h3>
  ...
</div>

It’s now more readable. However, such HTML codes can still be easily broken when people start to modify it. Especially when it’s other person than the original programmer modifying the code. Why?

Separation of Concerns

This principle tells us that the second version of our sample code still buries the seeds of failure. There are at least two issues associated with it:

1. The class name “mx-auto” is self-explanatory in telling what CSS styles will be applied. However, it does not help us understand what the HTML code is about. Shouldn’t we make our HTML code clear about what it is rather than explaining what are the styles applied?
2. It’s obvious that we could apply the .mx-auto class to various HTML tags which will have different logical meanings. One day when we update the style properties of the .mx-auto class, all HTML tags referring to this class will be affected. Some of these effects could be what we desire, while some could be not. Things will become ugly when some of the effects are not even what we have expected.

If the above explanations are a bit abstract, let’s rewrite our sample code once more to make things concrete:

<div class="article">
  <h3 class="article-title">My Big Title</h3>
  ...
</div>

This time we assign the .article class to the <div> tag and make it clear that the HTML fragment is to represent an article. With such a small change, we make the HTML code more readable and prevent someone to accidentally introduce a bug because they mis-read the code.

Put into practice

With the knowing that the separation of concerns principle can help us write robust codes, the next step is how can we apply it.

Developers may not get much help with the existing software tools. One possible solution is to use Sass. Sass allows you to inherit CSS properties of another class like:

.article
  @extend .mx-auto

It looks good except for a little problem: the .mx-auto is defined in the Bootstrap package. To extend the .mx-auto class, you’ll have to import the Bootstrap Sass file and work your way there. What if you don’t have the Sass source file which define the class you want to extend? You’ll have to import the result CSS file.

Another solution is to use coServ. coServ is a modern web framework which does many amazing things including facilitating the separation of concerns principle. coServ offers a similar !extend directive in CSS declaration:

.article: {
  '!extend': '.mx-auto'
}

You can also extend (inherit) multiple classes at the same time and add new properties:

.article: {
  '!extend': '.mx-auto .my-3 .border .border-primary',
  'font-size': '1.2rem'
}

The nice thing is you don’t have to import anything. As long as the extended class is defined somewhere in your web page, you can extend it. You don’t even have to worry about where does the css class come from.

That pretty much concludes our article. If you’re not leaving soon, I’d like to use a few lines to mention coServ: besides the one we just mentioned, coServ has many nice features such as CSS encapsulation and HTML refactoring that can be very helpful in web programming. I’d like to recommend you to give it a try and give your feedback to the development team. It should be fun.