Back to blog

Semantics and Separation of Concerns

A rant against CSS Frameworks

Topics: css·frameworks

Share on

When deciding whether to use a CSS framerwork, we're usually looking to have our work reduced by using their styles instead of having to write our own.

Although CSS frameworks will provide you with a lot of goodies, we often ignore the fact that we're also increasing the complexity of our markup and our project setup, resulting in reduced code readability, reusability and maintainability.

In this article I'll show some problems that comes with the use frameworks and introduce you to the magical world of Separation of Concerns.

I know frameworks are very useful for a wide variety of projects. The idea of this article is to discuss a different way of doing things that you might not be aware of and may help even if you're a framework user.

Here we go!

Let's take as an example, the code from the TailwindCSS utility framework site:

<div class="mt-4 md:mt-0 md:ml-6">
  <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
    Marketing
  </div>
  <a
    href="#"
    class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline"
  >
    Finding customers for your new business
  </a>
  <p class="mt-2 text-gray-600">
    Getting a new business off the ground is a lot of hard work. Here are five
    ideas you can use to find your first customers.
  </p>
</div>

TailwindCSS example.

Thanks, I hate it. I mean, you can't really understand what your visual output is going to be like unless you know the framework well already, or you wrote this snippet yourself. What about maintainability? If you can't or don't want to modify the markup, you'll be blocked.

This is not an issue with Tailwind alone. Bootstrap, Bulma, Tachyons... all CSS Frameworks work like this.

Now contrast it with this:

<div class="container">
  <div class="title">Marketing</div>
  <a href="#" class="subtitle">Finding customers for your new business</a>
  <p class="description">
    Getting a new business off the ground is a lot of hard work. Here are five
    ideas you can use to find your first customers.
  </p>
</div>

Using semantic classes to describe your content.

Semantics and Concerns

Now, you still don't know what your output is (doh!), but at least you know what this code is referring to. Your classes are semantic. They describe what your content is, not what your content looks like. The styling for this section is actually completely separated from your markup (in a css file somewhere).

And this is what I mean by Separation of Concerns!

Your markup should be independent from your styles. You could use this same section of your code for a completely different page and you'd only need to change your CSS... or if you're using preprocessor variables (I suggest Less, for the reasons listed here), or CSS variables, you might get away with only tweaking a few of those to get a completely differenty look.

Separation of concerns Found on /r/programmerhumor. I don't who to credit for this, though.

To make things more visually disgusting, breaking separation of concerns is the same as gluing parts of skin directly to your bones ☠️.

Complexity

Maybe you don't need to customize anything. You're completely fine with the default look of these frameworks. Well, that's great, but for most professional projects you're most likely going to want to make it stand out a bit from everyotherframeworkwebsiteoutthere!

And here you'll argue...

"But all frameworks allow you some sort of theming/customization layer..."

Well, frameworks will never allow 100% of customization, and now you're just a trading off between writing readable code, in a widely known standard (CSS), and going with shifiting the complexity that you removed from your styles into your markup and your project setup.

Unless you're going to be the only person to ever see this code, it's probably a best bet to stick to the basics.

You may end up with dependencies that you might not need or want in your final bundle, such as jQuery.

In the future I'm going to write about how we can leverage the use of frameworks with CSS preprocessors to profit from the best of both worlds.

Good ol' Garden...

A great example of good separation of concerns is the project CSS Zen Garden.

There, they have a full page where the structure only uses semantic tags and classes, and on the right navigation bar you can choose between several completely different styles for the same page, where all the changes were made on the CSS file only.

How hard do you think this would be if the markup used a CSS framework?

Finally: Do you need to know CSS?

If your job depends on you being good at CSS I'd invest in becoming a Less/Sass expert. You can achieve the same level of configuration of any framework while maintaining flexibility and reusability of your styles.

On the other hand, if you only use CSS for your side projects... sure, go ahead. Don't waste your time on CSS and pick a framework. I'd start with something simpler like Bulma, but any other should do.

Share on

Why don't you share your concerns on the section below?

Sign in with your github account to be able to comment.