© 2017-2019 Hoang Nguyen
September 27, 2019 • ☕️ 4 min read
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.
You Think You Know CSS is an original series about some core CSS topics which you think you know but not deep enough to talk about them comfortably.
Let’s dig deep into pros and cons of using CSS frameworks and try some popular ones!
It’s hard to decide whether to use CSS frameworks!
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 predesigned 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.
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.
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.
Bootstrap is an 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.
Tailwind is a utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Foundation is 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 is a modern responsive front-end framework based on Material Design
Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Bulma is a free, open source CSS framework based on Flexbox
UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
PureCSS is a set of small, responsive CSS modules that you can use in every web project.
Ant Design is a design system with values of Nature and Determinacy for better user experience of enterprise applications
Tachyons is a growing library of open source components written in static html that are easy to use as is, customize with your own theme, or port to a templating language.
Primer is the CSS implementation of GitHub’s Primer Design System
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.
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.
My general point is there are many good CSS Frameworks out there, try 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.