I recently saw an article that posed the question of, “Should you use a CSS framework or write custom CSS?“. Well, spoiler alert: you absolutely should use a CSS framework (unless you are learning CSS). The real and better question you should ask is, what framework should you use? That is what I will be helping you answer with this post. I’ll dive deep into what frameworks are, what they offer, and what considerations you should make when you pick one.
Let’s first explain what a CSS framework is for. Much like other types of frameworks in the web development space, the core purpose of a framework is to get you up to speed quickly. Specifically, CSS frameworks provide CSS to achieve various aspects commonly required when building websites or web applications, in addition to making some design decisions for you. The specifics of what a framework provides you will, of course, come down to the individual framework you’re using. Some are all-encompassing and offer everything needed to get most projects off the ground, while others are more focused or lightweight. So, assessing each framework and what it provides is essential to determine if it meets your project or team’s needs.
I’ve mentioned that what framework you use depends on what you need, but what do I mean by that? Put simply, the requirements of a highly interactive enterprise-grade web application will be very different from a simple website or even a blog. If you intend to build a web application, you may find frameworks with a heavy focus on components beneficial. Meanwhile, if you are making an agency website, those components will be less useful to you and instead would weigh your site down. With Google placing such importance on Core Web Vitals, you don’t want to be including things you don’t need (with many frameworks, there are tools/ways to only bring in what you need, but we’ll talk about that later). Let’s get into specific benefits.
Right out of the gate, you get immediate time savings by using a framework thanks to all of the CSS and styling done for you. Styling essential elements like links, forms, and such can be pretty tedious, but you don’t even have to think about it with a framework. With frameworks that include components (like nav, modals, cards, etc.), even more time is saved, not just because of the styling provided but because you don’t need to worry about designing them in the first place. Although, this can be a downside if you don’t like the designs provided for you. Something else to remember is that popular frameworks are battle-tested and offer proven CSS, so you spend less time tracking down and fixing bugs or oversights.
Want to know what the best part is? Documentation. It’s often the first thing to go to the wayside in a project, leaving you with a heap of CSS to figure out on your own. But with a CSS framework, you have documentation that will make building a consistent front end much easier. This will also simplify onboarding other developers.
Frameworks naturally assist in consistency by providing a unified, standardized design and way to style your project, leading to a more professional look and feel. The net gain to the user experience is a significant bonus when things look and behave how they expect. For businesses, this can make customers more willing to spend money on your site. Meanwhile, a poorly designed site will look unprofessional and push users away or, worse yet, make them distrust your site.
Maintenance is often overlooked and undervalued when you’re in the early stages of a project, but it can be a real game changer in the long run. Anyone who has worked on large and especially long-lived projects can tell you that the CSS eventually becomes unmaintainable unless extreme care is taken. Additionally, if you have a large team or bring on new team members, they don’t need to sift through mountains of custom CSS; they can simply be referred to the documentation for the framework. This provides major benefits in terms of efficiency of work both in active development and during maintenance.
Let’s get into the specifics about what you might expect from a CSS framework:
When designing things, you want as few surprises as possible; that is where reboot or normalize style sheets come in. They help by correcting inconsistencies across browsers and resetting the styling of basic HTML elements. You can, of course, get standalone versions of these if you wish to avoid a complete CSS framework.
Examples:
With Google prioritizing mobile friendliness and the fact that mobile devices are a huge part of internet traffic, it goes without saying that whatever you build should be responsive. Frameworks can simplify your life significantly by providing you with a well-standardized and tested responsive layout/grid system that is ready to use. If for nothing else, this is one area you should always use a framework for since, again, it’s always necessary, and it’s probably one of the more challenging aspects of CSS design to implement, thanks to responsive needs. The good news is there are responsive layout/grid-only frameworks out there if you wish to avoid other aspects commonly found in frameworks. Additionally, using build tools like Webpack, Vite, etc., you can extract a grid system from a framework as well.
Your average CSS framework will make content and things like forms look nice right out of the box, allowing you to focus on other aspects of your project. Is this aspect necessary? No, but it once again depends. You’ll definitely benefit from this aspect if you’re using form elements. As for typography elements, it’s more debatable since you may disagree with the choices made by the framework, and it’s pretty simple to implement your own styling there.
Components are where CSS frameworks can really save you some time. What is a component, you ask? Think of things like accordions, modals, or nav bars. These are collections of elements to form some usable or interactive UI element. Not all CSS frameworks offer components, but many do, and some frameworks are specifically component frameworks built on top of another framework. Depending on the type of project you’re working on, these may be entirely unnecessary.
Utilities are classes meant to fulfill a specific and discrete task, like adding padding or margins with a straightforward abbreviated class name. Oftentimes, you can modify these class names with numbers to specify how much you want. Some frameworks will use the terms utility and helper differently, which can be confusing. Additionally, some frameworks will instead call SASS tools utilities, but this is uncommon, and utilities are widely used to mean “helper” classes.
The following is probably not 100% complete or even “proper” since I haven’t seen any “official” classification for CSS frameworks. Some frameworks also blur the lines, making it tricky to have a strict classification for them so take all of this with a grain of salt.
This is the most common type of CSS framework, offering more or less everything you might need for a project in one package. In more recent years, there has been a shift towards more focused frameworks since these are often referred to as too “heavy.” While it is true that these frameworks can be quite hefty due to all of the additional CSS required to provide all of these extra features they offer, if you utilize a build process, you can mitigate much of the weight by only importing what you need.
I think it’s fairly safe to say that Bootstrap is the most prominent example of this type of framework, both being very popular but also having been around for a long time and quite possibly leading the CSS framework revolution.
Notably, people often make themes for these frameworks that modify the appearance while sometimes offering more features.
Examples:
Component-focused frameworks place more of a focus on providing you with a long list of components to choose from. These are sometimes built on top of other frameworks, such as Tailwind. If you’re building a web application, these can save you a lot of time, both in terms of writing CSS and designing the components. Within this category, you can find frameworks that are designed to be used with front-end frameworks like Vue, React, and Angular. You’ll want to pay attention to be sure they will work with your project. The benefit these provide, however, is the components will slot right into your project and be interactive without any additional work. It’s also worth noting that in this category, it’s more common to encounter frameworks that aren’t free to use. You always want to be aware of the licensing requirements of the frameworks when choosing one for your project.
Examples:
Utility-first frameworks have been growing in popularity over the past several years, undoubtedly thanks to people’s frustration with larger general-purpose frameworks’ bloat. These frameworks provide you with loads of classes with discrete styling to handle almost anything you could need, with only ever adding classes to elements. These won’t necessarily save you time like other frameworks would since they don’t tend to include components or other premade aspects. They also tend to be a bit less opinionated as a result. One major criticism is that they can lead to bloated HTML due to the discrete nature of the classes requiring you to use many to achieve a particular look.
Examples:
Like utility frameworks, classless frameworks have undoubtedly sprung up to simplify front-end design and combat the bloat that larger, more full-featured frameworks bring to the table. These are unique compared to other framework types since they focus on meaningfully styling HTML elements without needing classes. Although, due to the challenge of no classes, they often offer some classes for modifiers. These can be great for simple sites.
Examples:
If all you want is a framework to provide you with a responsive grid layout, these are for you. They provide you with just the tools necessary to layout your elements, nothing more. It’s noteworthy that most general-purpose frameworks allow you a way just to use this aspect of their framework.
Examples:
Ok, by this point, you should have a much better understanding of CSS frameworks, but you might still be wondering what some of the catches or drawbacks of a framework are.
This should go without saying, but choosing a framework is a commitment. Unless you select one of the minimal or classless frameworks, switching down the road will be a real challenge. There are a few critical reasons for this.
Class Name Incompatibility: This is probably the most apparent reason since you will struggle to find class name compatibility amongst multiple frameworks. The classes from a CSS framework will be deeply ingrained in almost every aspect of your project, making changing frameworks very time-consuming.
Style Incompatibility: This should be obvious, but choosing a framework will dictate the styling for your entire project. Switching frameworks will likely result in you needing to redo aspects of your design to fix styling issues in your project.
HTML Incompatibility: This is probably the least obvious problem you’ll run into. It’s pretty typical for frameworks to require a particular HTML element structure to achieve various components. As you can imagine, different frameworks may need other structures, thus causing you yet more work to switch.
For those reasons alone, you want to be sure of your project’s requirements so you can choose the right framework before committing to it since switching frameworks later will be costly.
CSS frameworks are probably one of the most opinionated tools developers use. When you choose one, you are committing to the conventions and standards of that framework. On top of that, you’re committing to the author’s design decisions. When selecting a framework, check the documentation and ensure you’re ok with how it does things.
This is obvious, but you’ll want to ensure the framework meets your project’s needs. These needs could be wanting pre-made components or just having a starting style close to what you are looking for. If you are building a very simple application and want to use something like Bootstrap but are worried about the performance implications, do keep in mind you can use build tools to include only the aspects you want or need. Additionally, with frameworks like Bootstrap, there are many themes out there that could make the styling more to your liking or add yet more components you might find helpful.
Performance and optimizing may be essential depending on what you are building. For example, when building websites, you should be very aware of your core web vitals. Bulky CSS frameworks can slow your site down and have a negative impact on your CWV. The good news is some frameworks allow you to use only the parts you need, although it may require a build tool like Webpack or Vite. If you’re not interested in adding complexity to how you make the site, you can instead opt to use a framework that is lightweight out of the box.
People tend to flock to the most popular things in general but there are advantages to using popular CSS frameworks.
By this point, you should have a much better understanding of CSS frameworks and things to consider when selecting one for your project. Again, I can’t give exact answers regarding which one to use, but I think the information I’ve provided will get you started and make informed decisions. The best way to find what works best for you is to try some out. There is a learning curve to these, much like anything else, so you may need time to get comfortable with whatever you choose.
Also, please leave me feedback on this. I would love to hear what you think of this post. Were there things I left out or aspects I should change? Since this post is meant to be educational, I may update it if necessary.
Good luck and happy coding!
Michael Lauridsen
Michael is a Senior Full Stack Engineer with over ten years of professional experience designing and developing end-to-end applications for the web. He has successfully architected and deployed over a dozen applications throughout his career.
Michael Lauridsen