The one downside with using CSS frameworks

I am all for making my coding and front-end life as smooth a process as possible. And thanks to the advancements in technology and our human natural ability to want to share, we now have many pre-built and very attractive CSS frameworks to choose from. What are CSS frameworks? Essentially they are pre-written and structured CSS libraries (files) designed to give you a cohesive look without having to type a single character.

Things such as mobile responsiveness, specific browser behavior and consistent themes are taken care of for you. This takes the hassle out of setting up boilerplate code and elements each and every time you decide to build a new web property.

Before we get to the potential downsides of using these packages, here are a few of the more popular frameworks that you can find online today that are still being maintained.

Google MDL

Material Design Lite, or MDL as it is more frequently referred is Google's attempt to create a public framework for Material Design. Material Design is Google's own design specification for its properties. Everything from the button look and feel to the various hover effects that you normally see on their websites.

It is relatively simple to implement, though the class-declaration structure falls a bit on the wordy side. Take the following for example. A button designed using MDL would need to be declared as such.

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
    

Bootstrap

Bootstrap is one of the oldest CSS frameworks that is still actively maintained today. Which means it is robust and stable, at least for now, and you can expect new features to be added on some form of development cycle. Here is a quick example of Bootstrap in action.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Notice that it is a big simpler to use than the previous MDL example above. But both of these are probably not as simple as the following.

Bulma

Bulma is relatively new to the framework game, but it is quickly growing its reputation and for good reason. It is incredibly easy to setup, essentially including the 1 CSS file but more importantly it doesn't require hundreds of pages of documentation to use. You don't need to take a class or be certified to start to make use of its many features. As an example, here is a set of <div>'s in a grid layout. Bulma will handle the dirty work of positioning everything for us by default.

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

And these are the biggest benefits that we can get from CSS frameworks when done correctly. They don't interfere with our workflow too much, and they provide us with a good foundation for staring any project.

So with all of these great benefits, what are the downsides you're asking? That's the whole point of this article after all. They aren't clear immediately and sometimes require a few months to spring up. But a CSS frameworks biggest benefit, is also its biggest downfall.

Customization

By deciding to build your websites on top of a CSS framework like the ones mentioned above, you are essentially delegating much of your design power over to somebody else. Rounded corners, box-shadow's and font-styles and sizes will be given to you out of the box. And while you are more than free to change them or override them, you would be defeating the purpose of the framework at that point.

Undoubtedly you will introduce custom CSS into your web projects. Whether you are working with a designer or on your own, that creative muscle will eventually twitch and you'll decide to change the shadow size perhaps. This won't be a problem in the beginning and in small quantities. But in the long term, you will encounter what I'll discuss next.

Breaking updates

There is a vast difference between Bootstrap 1.0 and 4.0. In order to keep up with the latest web standards, these frameworks roll out updates every so often. Certain elements will be deprecated and no longer supported in future versions. Just as car engines from the 1960's can't probably be used in cars today, so too will certain CSS elements go the way of the dodo bird.

I once had the task of updating an older website to the latest version of Bootstrap. That became an incredibly time hungry task in the long term and in the end, the website essentially came out looking almost exactly the same. Why was it so difficult? The process essentially entails removing all references to the old version of the framework, and pointing it to the new one.

As soon as you run that code, more than likely your website will be broken at various places. Your job then becomes to investigate each break and to find a solution as to why. This will undoubtedly introduce bugs that you won't see until the next version of the framework is out.

And that right there is the downside. Frameworks solve the problem of the current present moment of getting a project up and running. But they still fall short when it comes to future maintainability. Even switching between 3.0 and 3.10 can introduce bugs that are hard to come by and can take you hours to solve, depending on the size of the project that you are working on.

There is a time and place for CSS frameworks for sure. As I mentioned above, if you are setting up a landing page or some type of internal dashboard, then using an MDL template might be the most cost-effective approach. If you are working on a high-traffic, fast-paced, constantly changing environment, then you might want to steer clear and perhaps even begin to design your own framework in that case.

Though one day you might end up facing that same exact challenge. If you use any CSS frameworks that you find super useful, comment down below as I am always interested in testing out different technologies.

If you want to improve your CSS skills, I would recommend the following as it includes a few best practice approaches to CSS.