CSS Frameworks Vs Custom CSS [An Overview]

Frameworks have definitely changed a lot about the web development process. Pure hard-coding of CSS always gets the job done, but there came the need for speed and uniformity. This need was the foundation for the birth of CSS frameworks. The need to develop web pages quickly, and ensure consistent designs and layout was key.

The focus of this article is to help New developers be able to make an informed choice on when to use a Framework or build from scratch.
In my experience and with my interaction with newbies who are new to it, a ton of question always comes up. One of the very common ones if deciding whether or not to use a CSS Framework on a project and I hope to provide and answer.

What is a Framework?

A Framework is a standard set of rules and methods for handling similar types of problems

The major goal of Frameworks is to ensure that there is no reinventing the wheel.

So, what is a CSS Framework?

A CSS framework is a library or tool-set of predefined CSS classes that can be used to create web pages. It was easy to see that there are many common features and components across websites. The major idea about frameworks is to ensure that there is no reinventing the wheel.
This way, developers do not have to start hard coding every bit of CSS code from scratch. Developers can go right into building the unique features of their websites or applications.

Also key is the fact that design styles are easier to agree on. In a team of developers, it is easy to set basic guidelines to ensure pages look identical with the use of a Framework

Some of the popular CSS frameworks new developers should be aware of are:

1. Bootstrap
2. Foundation
3. W3.CSS
4. Material UI
5. Semantic UI

Frameworks are developed regularly by people who are of the opinion that the already created frameworks do not meet their needs well enough
From my little experience, I would say that 3 factors can be used to determine if a Framework is good.

• Speed of development
• Uniformity of design and layout
• Ease of code management

The Frameworks listed earlier meets the requirements for most developers, that is why they are popular.

The goal of every Framework created is to make web development processes easier but that is not always the case. The responsibility lies on the developer to know when to use Frameworks or to go the plain way.

Answering that question is not always going to be straightforward. To do that, I will give a couple of scenarios to better explain how every project is unique and should be treated as such.

So, answering the questions of :

• Does it make development faster?
• Does it help to ensure uniformity in web pages?
• Does it help to make code more manageable?
  

To make the choice, you should have a priority of what is most important for the project. So making the choice would be about finding out which of the approaches takes the majority of points.
A table like the one shown above will make it easier to make that choice.
I will give sample scenarios and tick the appropriate metric for each scenario.

Scenario 1

An informational website is to be developed really quickly and without any unique features. The straight forward answer will be to use a Framework.

Scenario 2

A very large website is to be created with many pages that having the same design theme. Another requirement is that the page should be easy to manage and make site-wide changes to.

The answer in this case will be to use a Framework.

Scenario 3

A new website to be developed has a lot of unique features in terms of layout and design.

This might be a little trickier to answer. This leads to a second question, will it be easier to modify an existing Framework or to build from scratch.
If it is easier to modify you can go with a Framework and if not, otherwise.

In conclusion, Frameworks are tools that can be really beneficial if used rightly and can be a brick wall if used wrongly. Ensure to evaluate every project and what you envision for the development process before making the choice.