How to Choose a CSS Framework

Choosing any framework is challenging. A framework is a tool that requires commitment; we rarely choose it for just one project. We take our time, learn it, adapt it.

Recently I started to be interested in why and how someone chooses a framework. This is because we began to develop our own, Spruce CSS.

Why We Need Frameworks?

First, do we need a framework at all? Frameworks are everywhere in development, no matter the field. Laravel is a back-end framework, Boostrap is a front-end one.

We use frameworks to save time, make DRY code, write better code. Declaring better code is often challenging, but having a system you can use in each project is a win.

We – as individual developers – are on different knowledge levels. A framework can help us to bridge some knowledge gaps. But we have to be careful because in the long run, if we don’t know what is under the hood, these won’t protect us from failure.

Frameworks are excellent tools, and we need them.

Do We Need a CSS Framework?

Now let’s get to the subject. Do we need CSS frameworks? CSS is a special domain in web development. It is a description language for styling. It is easy to start, easy to use, and hard to master.

It gives us a few points to start on. We got the syntax, and that’s all. A lot of rule is on us. A framework in CSS is needed because we need more guidance.

A framework is a system that gives us new tools and rules. It can be a small Sass mixin library like Bourbon or a bigger one like Bootstrap.

Which CSS Framework?

It depends on your situation. When I started, I didn’t use one, and then I used Skeleton, then Bootstrap 2, 3, 4, after that just the BS grid, then nothing (we got Flexbox and Grid), and finally Spruce CSS.

The project determines the system you need. Using a framework is convenient because all of our projects will use similar stuff. But this is a big drawback because it kills innovation and learning.

Of course, we can update our system (like in the case of Boostrap) but using Bootstrap and understanding it is two different things. While I think it is good to use a framework, I believe it is necessary to understand it.

The Types of the CSS Frameworks

There are many different types of frameworks for stylesheets; it is a broad spectrum. Today’s most popular one is Bootstrap, a comprehensive toolkit with Sass support, grid system, and components.

Another Bootstrap-like solution is Bulma, which is also a more prominent player. If you want something radically different, you can try tailwindcss, a great utility first system.

The biggest advantage of the mentioned ones is that they come with many resources, support, and excellent documentation. One significant disadvantage is that learning them and staying updated is more challenging (but the learning curve is always present).

If you need a smaller system, you can try Pure.css or Miligram.

If you need a system without classes, you can give it a try to Picnic CSS or water.css.

If you need a modern, Sass-based system, give it a try to Spruce CSS framework. It is a newer one but works for us.

The Requirements

As I said earlier, a project and our needs are the ones that determine the requirements. You should choose one that suits you and your team the best. Selecting a popular one is always safe, but I don’t think there is a wrong choice.

All of them can be good, so you can’t make big mistakes here. A key point is you should know what you are using. So give it a little learning and experimenting time.

The following questions could help in the decision:

• Do we need pre-built components?
• Are we use Sass?
• Is there a system that our team already knows?
• What complexity are we looking for?
• What physical size are we aiming for? More pre-built components and functionality mean bigger size.

Let’s get experimenting!