Cascading Style Sheets (CSS) frameworks do the heavy lifting when you're starting your web application. There are a number of options to choose from, which begs several questions: which framework do I use? When do I need a CSS framework? How do I choose a CSS framework?
What is a CSS framework?
A CSS framework is a collection of styles that can be composed together to create a user interface. A CSS framework gives web developers the presets to handle layout, forms, buttons, theming, and common interface patterns.
Here are some of the CSS frameworks you will hear about today:
Many of the presets among these frameworks will overlap. Where most CSS frameworks stand out is how the developer (you!) will use the framework. Let's look at some brief comparisons, and how they relate to markup (HTML), styles (CSS), and scripts (JavaScript).
The CSS Framework Showdown
Bootstrap vs Pure.CSS
Both of these CSS frameworks have much in common. Bootstrap is a UI toolkit that uses markup, styles, and scripts to create re-usable interfaces. Pure.CSS, on the other hand, is mostly styles and just markup.
So how do they stack up? While Bootstrap is designed to do the heavy lifting for you, Pure.CSS is designed to be a base for your common interfaces. This can make a huge difference in the amount of effort it will take for the developer. When it comes to bundling size, Bootstrap will be much larger (over 100kb) while Pure.CSS only uses less than 4kb. This can make a huge difference in your web app and how fast it will load.
Most people will choose Bootstrap for user interfaces that are not accessible to the public, or otherwise when there is no need for a bespoke design. Developers will reach for Pure.CSS when they're looking for less theming and want to have more control over the UI. This is because Pure.CSS is a great starter for building styles on top of the framework defaults.
Bootstrap vs Tailwind CSS
Bootstrap and Tailwind CSS are great options that fulfill different needs. In our last comparison, we discussed how Bootstrap is designed to do the heavy lifting as a pre-designed user interface toolkit. Tailwind CSS, however, doesn't provide any user interface components.
Tailwind CSS is a strictly CSS-only framework with only styles that are used for composition. It provides utilities that the developer can use to compose styles to build custom designs. Tailwind CSS also has a much smaller footprint, coming in at 37kb.
When choosing between Bootstrap vs Tailwind CSS, the decision comes down to whether you need an opinionated framework or not. If you want all of the building blocks to build something bespoke, go with Tailwind CSS. Otherwise, if you need to build something quickly and the design doesn't matter, Bootstrap can help.
Pure.CSS vs Tailwind CSS
Pure.CSS and Tailwind.CSS have more in common than the previous options. Both of these frameworks are centered around building blocks, while Pure.CSS is a sorta half-way point between Bootstrap and Tailwind.CSS.
Pure.CSS is a great option when you need just the basics covered. But if you find that does too much, Tailwind CSS will give you all the utility without the fuss. Both of these frameworks have smaller footprints than most, so either choice can fit into your web application without too much bundle guilt.
When do I need a CSS framework?
With plenty of choices at your disposal, the choice to use a framework will depend on the requirements, and your needs. Here are some common requirements and need to consider when you're starting your next CSS project.
CSS Reset
Web browsers each have unique styles, and in order for the design to be consistent, you will sometimes need to consider a CSS Reset. This will override the browser's default styles to normalize the styles across browsers. There are some great options for a CSS reset.
Design vs. Delivery
This is one of the major reasons to consider a framework. A framework can do the heavy lifting and free the developer up to prototype and build. On the other hand, some frameworks are overly opinionated and can get in your way when you need to build something custom. In some cases, it can be a matter of both design and delivery. Then there is bundle size to consider.
Bundle Size
Another important factor that cannot be overlooked is bundle size. Developer experience is important, but its importance is always weighed against the performance of the web application. A web app is no use if it's easy to build but cannot run adequately on target devices. So when considering a CSS framework, measure how much of the framework you would be depending on - and whether that justifies the bundle cost.
You stylin'
CSS frameworks are a great option for software engineers who want to focus on building and shipping. They can do the heavy lifting for you, or weight down your application - so choose wisely. Front-end developers in 2020 are fortunate to have a number of options, and resources to help decide which one to pick.
Here are some other resources if you are still deciding:
Top comments (1)
Amazing! Thanks for your post!