3 reasons to NOT use CSS Frameworks like Bootstrap and Materialize

In this Article (Click to skip to that topic):

• CSS
• Framework
• CSS Framework
• Benefits of CSS Frameworks
• Why you shouldn't use CSS Frameworks
• Some of the top CSS Frameworks

What is CSS now

CSS stands for Cascading Style Sheets which is used to style web pages. While HTML forms the structure/skeleton of the website, CSS is used to style it by giving colors, resizing elements, transforming elements, positioning them and a whole bunch of stuff.

What is a Framework?

A framework is an easier way to use the functionalities of anything, where the implementation is abstracted (hidden) from the user, and the user can perform that complex functionality easily and need not even bother about the complex implementation part of that functionality.

Now what is a CSS Framework?

A CSS Framework generally has a bunch of classes that you can use to your HTML Elements and benefit from the CSS Functionality that the class provides without writing any CSS. Now that looks cool right? In fact, it does have benefits.

Benefits of using CSS Frameworks

1. Get started with the development quickly

When you use a CSS Framework, all you have to do is to import the file provided by the Framework Provider. Use the respective classes to get the styling functionalities. All you have to do is use the class names and nothing else. So this way, you need not write any CSS Code and can focus on developing the functionalities and let the framework handle the rest of the work.

<button class="btn btn-default" type="submit">Button</button>

2. Faster User Experience

Many CSS Frameworks out there support CDN ( Content Delivery Network ) through which you can deliver your CSS Files to your web page. This is as easy as just importing the CSS Files as CDN rather than using the CSS Files provided by them.
This will ensure that the CSS Files are delivered to the users from their nearest servers and the servers also have a caching facility that enables the users to get the styles even faster.

3. Develop once, support multiple browsers

The CSS code which would have been written is written to support all the major browsers and also the old browsers. Hence you can stop worrying about the compatibility of your CSS Code across various browsers.

Then Why should you not use CSS Frameworks?

1. Difficult to apply your own styles

Say you're using a CSS Framework and you want to implement buttons on your website. Say you implement most of the buttons using CSS Frameworks, now if you ever wanted to make small changes to the button then you have to override the styles of the button that is applied by the CSS Framework or write the style of the button from scratch which will make the design inconsistent. This might also include you using the !important to force styles to be overridden which will increase the page load time and decrease the performance.

.btn {
  border: 2px solid dodgerblue !important;
}

2. Companies prefer you to know CSS

Say you are taking some web developer certification exams, applying for jobs, and hence attending interviews, they will expect you to know how to implement using CSS. This is because, every project doesn't use CSS Frameworks, so if you're taking up projects or joining companies to work as web developers then you will not be CSS Ready. Even though you know Frameworks of CSS, you are expected to know how they are implemented.

3. Lots of unnecessary CSS might bloat up the web app

When you are using a CSS Framework, it doesn't come up with only the features you want, although there are choices to get only those CSS Components you want, it still leads to a lot of extra code which goes into the bundle of your web app, which increases your web app size. It also results in a lot of CSS Code loading onto the user's webpage. First of all, this results in an increased size of your web app and secondly, it might affect the load time in cases where you are using fewer features from the CSS Framework but importing all of it, making it not so worth.

Conclusion

So if you're building a project and want to get started up quickly, then use CSS frameworks. If you're building a project who's design uses a lot of components from the CSS Framework with minimal modifications, then use CSS Framework. But if you're design is somewhat unique and it's a huge project, then you would be better off with writing your own CSS Framework. As a web developer, you should know CSS completely and know how to implement majority of the styles with raw CSS.

Some of the CSS Frameworks

1. Bootstrap CSS
2. Materialize CSS

Wanna Learn JavaScript?

I have got the exact place where you can learn it from, ask doubts and also get a Certificate on Completion. Check out this course from Udemy (Click) JavaScript Modern ES6 - 2020 - The Complete Course - Udemy. The first few videos are free on my YouTube Channel. Try them out here: Developer Tharun - YouTube - JavaScript Playlist Thank you for reading!

Did you know the 4 ways to use Generator Functions?

Article No Longer Available

Written by Tharun Shiv, originally at https://tharunshiv.com

Written by,

Tharun ShivFollow

Site Reliability Engineer | Blogger | Podcasts | Youtube @ developertharun

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Comments

[Jaya chandrika reddy]

What about CSS Grid and Flexbox then?

[Tharun Shiv]

I would certainly recommend using CSS Grid and Flexbox. They don't fall under the category of 'CSS Frameworks', and they are inbuilt. When it comes to aligning an element or a group of elements, no one does it better than CSS Grid and Flexbox. In fact, the CSS Frameworks themselves use CSS Grid and Flexbox underneath them.

So mastering CSS Grid and Flexbox is a great addition to your skills.
Hope this helps😊

[Jaya chandrika reddy]

Yes, they aren't Frameworks. Got it.

[warrior.dev]

I prefer a compilet ccs frameworks.

[Tharun Shiv]

Okay 🙂

[Allan Kibet]

You can alternatively go for minimal CSS frameworks like purecss.io/

[Tharun Shiv]

Thank you Allan, will check it out 🙂