CSS frameworks and libraries: A New look.
There are a lot of options to think of when choosing which CSS frameworks or libraries to use. Bootstrap, Foundation, Bulma, Material UI, Tailwind CSS, Ant design, etc. Each of these options is really good and each comes with its specific opinions baked in. These frameworks or libraries are normally divided into two groups, component-based e.g. Bootstrap, and utility-based e.g. Tailwind CSS. Are component-based frameworks better than utility-based frameworks? or vice-versa?. For some people, this question is easy to answer, but for some, it's not that simple. But, in the end, we use both methods to build components, so perhaps this distinction is wrong or misleading.
A way to think of CSS frameworks is exactly how we see programming languages, high level vs low level. These two types of programming languages are used to write programs for the computer, high-level programming languages come with a lot of abstractions and opinions already built-in on how to write these programs, while low-level programming languages come with little or no abstractions and give bare-metal capabilities close to machine code. In the same sense, high-level frameworks also do this and this is realized through already-made components, these components are already made with opinions on aesthetics and functionality, they make it easier as they give you classes that represent certain components and they remove the overhead of building a component. Low-level frameworks or libraries are closer to CSS as they give you helper classes for writing customizable components, the API for low-level frameworks are closer to CSS, but are still at a higher level of abstraction than regular CSS and they make it easier to build components compared to traditional CSS.
Low-level frameworks are what we call utility frameworks and high-level frameworks are what we call component frameworks,
Example of a high-level CSS framework
As we can see in the image above the CSS classes represent already made components already built-in with certain style opinions
Example of a Low-level CSS framework
The CSS classes in the above image are CSS-like keywords and they resemble CSS API but are built-in with certain defaults, the idea is to combine them to make a component.
So if I was to define something like Tailwind CSS rather than defining it just as a utility-based CSS library, I would define it as a low-level CSS library that gives us utility helpers classes for building components, being low level makes it more customizable and flexible but makes it harder to use or learn for beginners, as it requires familiarity with CSS. On the other hand, high-level frameworks have less flexibility but make it easier and faster to bootstrap components and are more beginner-friendly, so the question isn’t necessarily which one is better is, if you’re looking to quickly spin up certain components and don’t require customization a high-level framework would be better, but if you’re looking for more customization and perhaps you have a custom design system a utility framework would be better.
I hope this distinction makes CSS frameworks clearer and easier to choose from and understand. Thank you for reading.
