If you are a beginner, someone who is just starting with web development. You must be exploring lots of resources from where you can learn building lots of awesome stuff. You may or may not have been adviced by your friends to start using Bootstrap, Material-UI, PureCSS etc etc. What are the perks of using them how you can quickly setup up everything with few lines of code. No doubt since you are a beginner you might start doing that. So,

⚠⚠Please stop ! Dont do that.

Behind the scenes

3 years ago when I started my journey in Web Development. This was something I was totally confused in, should I learn CSS from scratch or should I just learn small little basics and jump into those eye catching, luring CSS frameworks. I was totally a noob in Web technologies ( although had decent knowledge of C, C++ ). Still it was difficult to choose. One one hand I had to learn the concepts like padding, margins, how to make a button beautiful and on the other hand Bootstrap was giving a small class "btn btn-success" to create a awesome professional looking button like this:

<button class="btn btn-success">Beautiful button</button>

and the button I knew about looked like this

For obvious reasons I choose Bootstrap over vanilla CSS and now making a Navbar was a piece of cake, copy the boilerplate code from bootstrap website and get your work done 😁. Obviously I enjoyed building websites, components with such an ease but when it came to explaining stuff to other peoplem like how its done what is happening behind the scenes I almost knew nothing. I lacked basic understanding of things.

Thing I learned from this

1. Because I chose a framework directly, I lacked basic understanding of CSS
2. I was not even familiar with basic concepts of flex-box, grids, transitions etc.
3. I got over confident of the things I knew nothing about.
4. Obviously I regreted that decision later.

Fast forward 3 years. Now I dont need any framework to build anything, I can create thing from scratch. ( Yes I learnt everything from 0 again )

CSS Frameworks VS Vanilla CSS

Short answer

• You might have heard about learning by doing, probably thats the case with CSS too, if you write your own styles without taking help from any framework surely you will learn it in a better way.
• You have full control on the things happening on the page, because you wrote it in your way, no framework is interfering with padding, margins width etc. On the other hand:
• CSS frameworks makes work faster
• Boilerplate code keeps things at ease, if stuck you can refer documentation.

Long Answer:

Vanilla CSS

If you are a beginner basic under of CSS is very important. It is very much important to know what is happening on the page, how the content is flowing on the page, how the elements are adjusting themselves according to the space available, what is box model.

Frameworks don't teach you all of that.

As a beginner its okay to write a code that is not optimized. Its okay that your button doesn't look professional. All of that will come over time. So learn the basics first and most importantly dont get intimidated by looking at the code that a professional wrote. You will be writing that one day may be better. So basics first !!!!!!!

Pros of using Vanilla CSS

1. You know how things work, how padding works, what is box-sizing: border-box etc.
2. Control over all the styles.
3. Better customization.
4. You can put your design to reality.
5. You can take inspiration from a design and implement it.
6. You dont have to be dependent on someone else from changes in your styling.
7. You will learn the best coding practices while writing it.
8. You might learn new and better way of doing the same thing over time.
9. Will definitely help you become a better web developer over time

Once you master your CSS skills you can infact create your own framework for you personel toy projects. Btw I have made one, you can check it at EaseCSS

Cons of using CSS Frameworks ( if you directly jump into it)

1. You will lack basic understanding of CSS.
2. You have less control on colors, padding, margins etc.
3. If you copy boilerplate code, it can be bulky as it contains lot of unnecessary things that you actually dont need.
4. Lots of websites use these frameworks so things might look the same ( sometimes might look copied ).
5. Additionally, you might need to overwrite a lot of classes or use dirty tricks like !important to really achieve the style you want.
6. CSS frameworks need to be imported may be through a CDN and that might import the full package and will make the codebase look bulky, when all you require is may be just a button, a Navbar etc.
7. If you dont know whats happening under the hood, debugging can be really difficult.

CSS Frameworks

No doubt CSS frameworks are one of the best things that ever happened in the Web Development industry. It gave developers lot of flexibilty in writing code, and saved lot of their time. You may be working with an organization that uses a framework you are already familiar with so wont be a lot difficult to settle in there. So yes Frameworks do come in handy.

But there is a time only after which you should think of using them. Offocourse if you have come reading this long you already know it,

Only when you are cleared with the basic understanding of the concepts, basics things like flex-box, grids, box-model etc etc, then you can think of using frameworks.

Pros of using CSS frameworks

1. Saves lot of time in writing code just by declaring few classes. e.g.,

Vanilla css:

<button>Vanilla CSS</button>
.btn {
font-size: 1rem;
padding: 0.7rem 0.5rem;
margin: 0.5rem;
border-radius: 5px;
background-color: crimson;
}

Bootstrap:

<button class="btn btn-danger">CSS Framework</button>

you see it saves time.

1. Consistent styling across whole project
2. Production and shipping of project becomes faster
3. You don’t have to worry about tons of cross browser compatibility.
4. Easy to use, since lot of example code is given in the documentation website where you can refer if you get stuck.
5. You mostly dont have to worry about the optimized code.

Cons of Vanilla CSS

1. Styling can be inconsistent.
2. Code optimization could be a problem if you are a beginner.
3. Have to care lot about cross brower compatibility.
4. Production can be little slow, since you are writing code from scratch.

Frameworks are awesome no doubt. Vanilla CSS can be really messy sometimes and vice versa. But you should know when to use what and where to use what.

I hope know you got a fair understanding of both the worlds. Obviously there could be lot more arguments about both and the debate might never end but I tried to be as consise as possible.

Whatever I have missed you can always add that up in the comment section.

Drop a review it would be awesome !!!!!