What is a CSS Framework?
Bootstrap, Tailwind CSS, Materialize, and more.
CSS frameworks are tools used by UI developers to make their job easier. Rather than reinventing the wheel each time a new project comes up; frameworks give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of spending time starting from a blank document. They’re also useful in large teams and help those of us that need to create a theme for use in more than one project. Oftentimes, however, CSS framework websites are a little ambiguous to complete beginners, filled with buzzwords and descriptions that only more senior developers will catch onto, and it’s difficult for beginners to tell when and which framework they should start learning.
In its simplest form, a CSS framework is a collection of CSS stylesheets that are prepped and ready to use. They’re tailored for use in common situations, like setting up navbars, and are often expanded upon by other technologies such as SASS and JavaScript. Think of it like a colleague giving you a completed CSS stylesheet for a home page you’re setting up. Basically, all you need to do is writeup your HTML with the appropriate structure, classes, and IDs and you’re off to the races. However, instead of that stylesheet being specifically for the home page you’re working on, it’s ready to accommodate a general “standard” of home page, having classes for things commonly found on other home pages (ie navbar, footer, slider, hamburger menu, 3 column layout). This allows you to quickly setup web pages without having to deep dive into some CSS, saving a bunch of time.
Time savings aren’t the only benefit gained by using CSS frameworks. Teams with multiple developers, especially larger ones, can really appreciate the standards that frameworks bring to the table. Instead of each developer bringing their own flavor of class names to a project, frameworks standardize layouts and allow one developer to easily read another developer’s code. This saves time, but also allows for a smoother development cycle with less bugs, and easier team communication. If you’ve ever been thrown into the deep end of a nearly complete project and told to fix up the UI, you know the pain that frameworks can alleviate.
It is important to remember that jumping right into a framework as a newbie isn’t recommended. Sometimes folks just want to get started as quickly as they can, and they see frameworks as a way to jump start their goals. While that’s true for spinning up projects, it can be harmful to your long-term career as you’d be missing out on learning the basic skills that can be applied across the board. For example, by learning CSS in its pure form first, you can easily search a framework’s documentation for how to do most of the things you were doing with pure CSS. It also allows you to easily identify issues within your syntax and can lead to easier customizations when you need to tweak the framework you’re using. On the flip side, if you jump right into something like Bootstrap, you’d be setting yourself up for learning Bootstrap’s way of laying things out and how they structure their classes. While you’d be insanely fast at spinning up a UI in Bootstrap, using pure CSS, or even another framework will often stump you and you won’t have that pure CSS knowledge to help problem solve and troubleshoot. To be clear this is my opinion on the matter, many UI developers have started using frameworks straight away and were able to expand their skills beyond the ones they started with.
If you think you’re ready to start using a CSS framework, there are a lot out there to choose from. Having used a few myself, with varying degrees of experience, I can say that they’re extremely useful. This is especially true if you choose the right one for your given use-case. In my next piece I’ll be discussing how to choose which framework is right for you and will be going over the three that I’ve used: Bootstrap, Tailwind CSS, and Materialize.
Connect With Us
Twitter | Facebook | Instagram | YouTube | Patreon | Podcast
