What are CSS Frameworks?

CSS frameworks are packages of code, usually installed via NPM in the terminal, that change how a document will read its CSS. Usually these tools will attempt to make writing CSS 'easier' in various ways. For example, the Tailwind CSS framework allows you apply many different properties to an element in a far more succinct way:

#credit-box {
@apply m-5 items-center flex
}

In the above code, I am using Tailwind CSS to apply three CSS attributes in a single line of text. I am setting the margin of the element to 5px, I am center-aligning the item, and I am assigning the flex display type to the element. In terms of cutting down on unnecessary code, these tools are excellent for trimming the fat of your CSS files.

CSS Framework limitations

Unfortunately these frameworks often have some pretty glaring limitations. In general CSS frameworks don't handle custom properties particularly well. For example, Tailwind CSS, as far as I am aware, does not accept custom hex codes when coloring elements. If you want to color an object with Tailwind, you'd have to choose from one of their preset colors.

Now this isn't a nail in the coffin for Tailwind, it just means that you can't use it for everything. In my last project a lot of my CSS wound up looking like this:

#item {
  background-color: #323432;
  @apply mx-0 center-align basis-1/2 
}

The above text uses both Tailwind CSS as well as manual CSS to achieve what I wanted out of it.

CSS Extensions

Separate from frameworks are CSS expansions, which can serve to expand the capabilities of CSS in new and interesting ways. For example in my last project, I installed a CSS extension called Sass, which allowed me to create custom designed borders for my elements. Unfortunately, due to the broad nature of extensions, it can be difficult to talk about them in broad terms, I just find it important to remember that if you find your CSS feels limited in its capabilities, there is likely an extension that can help you get the job done.

Summary

CSS frameworks are good for cutting bloat out of a project, but bad for customization. You are unlikely to find one that does everything you want it to do, but that doesn't mean you shouldn't use them. Find one that you like, use it to do what is simple, and then do the rest yourself. As for extensions, they won’t always be helpful or necessary, but they are a good thing to keep in mind if you ever find base CSS limiting.