There are many CSS Frameworks out there, different frameworks have different strengths you may be wise to work with several as opposed to one or you may even decide it’s best to develop your own set of frameworks that better align with your projects and coding style.
- Tailwind - Highly customizable, utility-first, and low-level CSS framework that gives you all of the building blocks you need to build bespoke designs rapidly without any annoying opinionated styles you have to fight to override.
- PureCSS - Set of ridiculously tiny and responsive CSS modules that provide layout and styling for native HTML elements, plus the most common UI components.
- Bulma - Free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
- Bootstrap - Open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
- Foundation - A family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
- Materialize - Modern responsive framework based on Material Design.
- Semantic UI - Responsive layouts using human-friendly HTML.
- UIKit - lightweight and modular front-end framework.
- Ant Design - A design system with values of Nature and Determinacy.
- Tachyons - Responsive interfaces with as little CSS as possible.
- Primer - CSS implementation of GitHub’s Primer Design System.
It’s hard to find the framework that works for you. Try to understand the CSS code and the quality of that code inside the framework. If you are not happy with any public framework then build your own. According to State of CSS 2020, Tailwind is leading as the most loved CSS framework.
Motivation
I personally have a love hate relationship with CSS frameworks! It is tempting to use them initially but there’s always something bothers me. Sometimes I want to remove them completely from my project, sometimes I really enjoy using them.
CSS frameworks are libraries built to make your life as frontend developer easier by including a mass amount of styling modules and tools.
They are often built with a set of following features: Utilities, typography, base, reset, normalize, icons, icon fonts, grid, general layout, common styled components, general purpose styles.
Development efficiency is the number one priority when choosing a CSS framework. There are many options out there with different purposes and qualities. You should try several frameworks to see which one works for you.
Most CSS frameworks do too much. They come with all sorts of pre-designed components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.
Benefits
CSS frameworks have enough benefits to warrant their usage. When choosing the right framework for your project, consider some of these points:
- Increased productivity - Imagine a situation when you install a framework, set CSS class name for an element, then a beautiful styled element emerges from nowhere! How cool is that! Effortless styling is the selling point of CSS frameworks.
- Standardized codebase - CSS frameworks often come with enforced naming conventions, style guides and architectures. This leads to standardized styling code everywhere as long as you’re still using the same frameworks.
- Responsive by default - All CSS frameworks take responsive design very seriously, all their components come with responsive by default. This is very helpful when you’re using grid or layout frameworks.
- Browser compatibility - As responsive design, cross browser compatibility is tested very carefully by framework authors.
- Consistent layout - Frameworks comes with a consistent design on their own. You’ll have very consistent paddings, margins, animations, colors and many little things.
Drawbacks
There can be some downsides to using a CSS framework if you treat them like a black box. Most of these cons are easily overcome, but you do need to be aware of them.
- Non transferable learning - There are no standards for designing CSS frameworks, authors can build whatever they want. Your investment in learning one framework can come in vain when you switch company using different ones.
- Heavy unnecessary code - Most CSS frameworks include tons of styles you’ll never use. Things get worse with small projects when you only use one feature but loading the whole big framework. This will slow your site down!
- Similar style everywhere - Many frameworks provide beautiful built-in styles that everyone can use with minimum customization. People are happy with these designs because they save a lot of time, this ends up with bunch of similar websites with very little character.
- Painful custom design - If you use general purpose CSS frameworks in a highly customized design project, you’ll end up overrides styles for many components. This is the turning point when you realize writing from scratch is far more easier!
- Vulnerable to changes - The more dependencies you have, the more vulnerable you are. Things get really ugly when you’re heavily using a framework which is somehow loses community interests and get abandoned. The cost of switching CSS frameworks is high.