How to Choose a CSS Framework
Choosing any framework is challenging because it is a tool that requires commitment; we rarely choose it for just one project. We take our time, learn it and adapt it.
Knowing why we use any CSS framework is an interesting topic because we started to develop our minimal variant, Spruce CSS.
First, do we need a framework at all? Frameworks are everywhere in development, no matter the field. Laravel is a back-end, Boostrap is a CSS, and React is a JS framework.
We use frameworks to save time, make DRY code and write better code. The catch is that 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. We must know and learn our craft.
In general, frameworks are excellent tools, and we need them.
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 (as with many things).
It gives us just 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 and structure.
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.
To make it a bit more complicated, we also have CSS methodologies like BEM or Atomic Design, which can give us more structure (usually implemented into a framework but still a separate thing).
Today CSS is better than ever. We got powerful tools that can make some frameworks deprecated, but still, they are popular as ever. I think it - their needs - mostly depend on which one you prefer. For example, I like to write my components, but I need a system to create (hence the existence of Spruce).
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 can kill innovation and learning.
Of course, we can update our system (like in the case of Boostrap) but using Bootstrap and understanding it are two different things.
There are many different 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. You can try Tailwind CSS, a great utility first system if you want something radically different, which today is as big as Bootstrap.
The most significant 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 a 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 try Picnic CSS or water.css.
- If you need a modern, low-level Sass-based system, give it a try to Spruce CSS framework. It is a newer one but works for us.
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 you need pre-built components?
- Are you use Sass?
- Is there a system that your team already knows?
- What complexity are you looking for?
- What physical size are you aiming for?
So, do we need a CSS framework? As you see, there aren’t any exact answers, and that’s alright. I think we almost always need a system or framework no matter what part of the web we work on. I also believe that we can learn a lot from them, but these aren’t magic. The result is always the same: a file with
.css extension we wrote. Hopefully, we won’t be totally disgusted by it after some month.
Let’s get experimenting!