Vanilla CSS VS CSS Frameworks

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 !!!!!

Comments

[Mohammad ramaden]

Thanks you , information huge .

[Technical Tale]

I'm backend dev looking to transition to fullstack. which one is a better skill to invest in? vanilla css or framework?

[Rob Levin]

The framework vs. vanilla css discussion for learning sake is an interesting one. I agree that overly relying on a framework as a crutch severely hinders one's own growth. But, it also typically means inefficient use of the framework too! The norm unfortunately. Most folks (I'd wager 99%) just drop in href="path/to/all/of/bootstrap.css". In fact, Bootstrap provides mechanisms for being used via its SCSS modules; it's stated and instructions are provided in their docs.

If you're in a SCSS env, you can literally start with:
github.com/twbs/bootstrap/blob/mai...

Just comment out the things you aren't using 💪 ⭐ 🍰

Also, BS's code is pretty solid and quite good for folks learning if they're a bit strategic in how they go about things. Rather then building an entire framework, start with your buttons.css. Maybe try on your own and see how you did. Then cross-reference BS and others. Then ask "hrm, why did they use that aria role? Let me google it." etc. and you will learn a ton. "Why do they chain their classes like that?" Then go read about SMACSS or look for Mark Otto's post on CSS chaining; and check out OOCSS. Then contrast that to BEM and others and decide pros/cons. Lots of great learning there.

I agree that if you build you're own framework it IS the ultimate in learning! I too have built a framework and continue to learn a great deal from that endeavor. But at work, I came into a codebase where they've already decided to use BS5 and so I also do that. But I learn from their ideas too. I think you should do both (use frameworks + write custom CSS). That's the ultimate imo 😄

Shubam, I checked out Ease. Overall nice project and good work! I have some suggestions (I know, you didn't ask haha). But fire up Lighthouse against some of your components. On the Buttons your contrast should be tweaked as it has contrast: "Background and foreground colors do not have a sufficient contrast ratio." — don't worry about it though; it's an easy fix and you can just play around with the colors. But your users will greatly benefit Shubam! Also, I'd recommend working out the margins/padding in a couple of places. The input areas feel to tight to the edge. Also, minor tweak :-) I hope you don't mind me chiming in...overall it's a huge accomplishment and you're definitely doing a lot of really nice things. Oh, I like the transitions you have. Very slick and smooth! Maybe check out mine too and give me your feedback. It's in my profile.

Overall, I would end that I wish JavaScript developers would take CSS a bit more seriously and stop being afraid of the cascade; and realize that no, CSS is not this easy thing that you can just slap on your features and pages. It requires some rigor and focused learning. But you can do it! 💥 🍰 💪 ⭐