DEV Community

loading...

Don't use Bootstrap

adithyanajay profile image Adithya Ajay ・2 min read

Don't use Bootstrap! Make your own custom CSS.
Why you should not use Bootstrap. For this go back in time! In your math class, When you were in school, teachers won't allow you to use calculator in class! Why? We were not allowed to use calculator because we have to develop skill to multiply, divide .. in our mind!

In web development world Bootstrap is like a calculator! It helps you to make navbar, slider, buttons etc in sec and that's awesome. But If you don't know how to make a navbar your own! How will you get your skills improve! It's like using a calculator without knowing how to multiply

I am not against Bootstrap! I love Bootstrap and it's free also. I recommend that if you are not in a rush if you and have time, make your own custom elements, Why use a navbar that's less customizable! Bootstrap is very handy when you are in a rush and your client wants you to create a website fast! Or if you are focusing on backend. Bootstrap is great for that!

It's hard to make your own custom element from scratch and it will take hours and even days. But if you build your own custom elements you will thank yourself in the future! Bootstrap would not have a button that's in your mind! Custom elements also make your website standout from the crowd out there!

Building custom elements will improve your CSS and HTML skills and make you more valuable! So I recommend you to not use Bootstrap if you are focusing on frontend part, mastering CSS is a must skill for a web dev!

I am not against Bootstrap, I love Bootstrap and the developers that developed it. It's handy when you want to make a quick website working.. Knowing Bootstrap is also a must! But don't always use it! It's like a calculator of frontend part =)

Happy coding!

Comment down below what's your opinion! And if I made any mistake pls mention it (I am new in writing blogs) =)

Bye!

Discussion (16)

pic
Editor guide
Collapse
sebring profile image
J. G. Sebring

I've had the privilege to create a new frontend framework for a company and I agree how valuable it is to, hmm "re-invent the wheel". It is, however, very time-consuming and in the process you will realize how stable and well tested frameworks like bootstrap or material design really are, specially if the count of supported browsers and devices are greater than fingers on your left hand.

Be prepared, depending on your ambitions of course that this is not a small task. Again I'm not referring to just skin your own button with some css here but to have reusable components that will fully replace at least all the form-elements.

I guess what I'm saying is, this a can be a noob-mistake, not saying it is. Just realize that this is quite a project of its own, a fun one indeed and you will learn tonnes, but if your motivation is to create that smart web-app you thought of all week, by all means, make your self a favor and use an existing library, but maybe try a new one this time? ;)

Collapse
_garybell profile image
Gary Bell

I always see Bootstrap as being technical debt. It's great to get things going quickly (I'm currently using it on a project which is in development) but I already have plans to replace it once the project is live.

Bootstrap has come a long way, just allowing things to be modular and pulling in what you need. But using just the parts we needed for basic styling increased our CSS file size by 300%, and CSS download time by 40%. It still wasn't much, but it's something we know can be reduced.

Collapse
slavius profile image
Slavius

Come on! CSS file size increase of 300% can also be from 1 kB to 4 kB. Does that matter? Even 150 kB CSS is like 30 kB GZIPped. Download time increase by 40%? Is it from 50 ms to 70 ms? You know humans cannot tell difference that small, right? Moreover, all resources like fonts, CSS, images are cached within the browser so the delay is incurred only at first load with empty cache.
Or do you want to delay your product by a year to learn all intricacies of CSS, DOM, javascript event handlers, async/await - just to build your own version of wheel?

Collapse
_garybell profile image
Gary Bell

The reason for choosing it was to speed up the development process. Whilst the increase isn't particularly large (despite the "horror story" stats), it's still a lot of stuff which isn't needed.

The CSS isn't actually may main issue. It's the reliance on jQuery. It's quick to work with, fairly reliable and so on, but teams forget about all of these additional dependencies and forget to update them. That's just problems waiting to happen.

Thread Thread
slavius profile image
Slavius

Well you said you consider Bootstrap a technical debt. It's just another framework to build things fast without writing too much code. The same however can be said about React, Java, PHP. It's another bunch of dependencies. Why not write everythin in assembler then? We have to move on and stop trying to re-invent a wheel. It's fine to dig deeper to learn how and why things work the way they work but it seems nonsense to me to do plain CSS and Javascript in today's agile age.

Thread Thread
_garybell profile image
Gary Bell

It's a bit of a leap to liken Bootstrap to Java or PHP.

Yes there's always choices and tradeoffs, but with display items like CSS, choosing Bootstrap always meant sticking to a 12-column grid. That's fine if everything fits in, or is a factor of 12. Or if you want to compromise on padding and/or spacing to fit otherwise.

I'm currently working on a project where the spec is to have 5 items in a row. With Bootstrap that doesn't work without having large gutters at the side. Either the design changes to look like everything else out there, or hunt for another framework, or create the CSS without a framework. There's far more flexibility in doing it yourself, or "reinventing the wheel".

There will be times when using a framework like Bootstrap is appropriate, even desired. But sticking with it forever is something which shouldn't be decided simply because it exists.

Thread Thread
slavius profile image
Slavius

I may be wrong but you are not forced to use Bootstrap's grid. You are free to use flex and just use Bootstrap UI components with it. Or any other grid system. Feel free to combine what works in Bootstrap with your own CSS/Javascript code. The whole minified Bootstrap has 21,5 kB and downloads in 24 ms on my computer. Afterall, Bootstrap can be fully customized to contain only components you need to minimize the size/impact removing parts of it (yes, you can completely remove the grid system without affecting other bootstrap components).
The whole point of Bootstrap, Material and others is to abstract you from different quirks of different browsers and operating systems. The same can be said e.g. about Java - that's where the analogy comes from. You don't care if it's Windows XP with FAT32 filesystem running in a VM, function ReadFile() figures that for you and you get the file contents.
If you feel like tweaking and making bug free version of your own grid system, UI components, animations, form validations for browsers like Firefox, Chrome, IE, Safari, Opera, Samsung browser on operating systems like Windows, Linux, MacOS, Android, IOS, smartTVs - it's fine. You could just save a lot of time and trouble just by using Bootstrap or any other framework that has massive resources to do that for you as it's baked by big tech companies.

Thread Thread
markohologram profile image
Marko A

I hope you do realize that a lot of it depends on the individual project? Not every project can or should be built with a premade CSS framework like Bootstrap or Bulma or SomethingOtherHere.

You have to think of use cases that aren't just your own. There are many more considerations to using a CSS framework other than saving some time.

Some companies need to follow certain branding and using Bootstrap (or whatever else) and trying to adapt it will just lead to too much unnecessary code because you will overwrite so much of the existing code only to make it look the way you need it to.

Regarding your KB argument, I would always say the less code you ship the better (doesn't matter if it's 2KB or 20KB less). Also, you are just focusing on CSS here (valid since person above mentioned CSS), but Bootstrap also brings its own JS and also jQuery with it which is unfortunate if you don't really use jQuery in the project, but now you have to have it as a dependency. Although, I would probably say that CSS is the least of worries when it comes to page size with modern websites because images and JS tend to be larger in size than CSS.

I don't have anything against Bootstrap, I actually like its grid very much, but there is a time and place for every tool and library/framework. It also just adds overhead as another dependency in your project that you have to worry about and it also brings other dependencies with it that you have to worry about.

You maybe work on projects that don't have any special demands and that's great for you, but you aren't thinking about requirements that other people have in their work.

Thread Thread
slavius profile image
Slavius

I'm not going to argue anymore.

The very same company you're working for made sites with bootstrap (and many other 3rd party components and frameworks) while you're providing arguments against it to a random guy on the Internet. You should maybe focus your efforts elsewhere...

Collapse
eniolajayi profile image
Eniola Ajayi

Very insightful article 😀.

It will be good to also point out that the bootstrap framework

  1. Dropped jquery in their latest version
  2. Cover every specific area that you might never have time to touch when you're working on a project.
  3. It's faster and allows you to prototype designs immediately so you can identify what works and doesn't.
  4. It is very helpful for teams and projects that scale

I agree that it can be hard to customize for very unique brand styles if you use the vanilla CSS version.

But that issue is completely knocked out when you start using their SCSS version. That way you can add only the parts of the framework you need and @extend existing classes to keep your html neat and semantic. I always use SCSS whenever I use any CSS framework which gives me all the flexibility I need especially when working in a team.

I think there's nothing wrong with using bootstrap. (except when you are building small projects, awwward winning websites or very special cases )

I believe that if you truly understand how a CSS framework works, it shouldn't be an issue. Don't fight the framework when you use it. Use it as a foundation to guide you in building unique website and apps.

It's ok to build your framework from scratch of course for learning purposes.(you'll learn a lot, trust me. I'm fact when you build one. You'll understand why front-end devs use CSS frameworks and appreciate them the more)

But unless you have the time, knowledge and resources when it comes down to designing intensive ,maintainable and long lasting projects that scale you will appreciate the speed and time any CSS framework saves you.

Again very insightful article Adithya Ajay ✌

Collapse
ikurosaki profile image
ikurosaki

Estoy dw acuerdo 100% contigo y una multitud sabe que es cierto lo que dices y defenderá su posición en el uso de bootstrap. Fuiste muy claro ejercita tu mente usando tu propio código CSS y y usa Bootstrap solo si es algo rápido y necesario, porque hay muchos desarrolladores que no saben un buen código CSS. Buen artículo, Saludos

Collapse
saptarshibasu15 profile image
Saptarshi Basu

Look who's this! 👀

Collapse
jamerbi profile image
Jacob Mer.

Between Bootstrap and Pure CSS... I don't know... I think I choose Tailwind CSS

Collapse
imagineeeinc profile image
Imagineee

i actually never use any frameworks or libraries like bootstrap, jquery or vue because it is more challenging to do it yourself and also you have to learn a new way to code

Collapse
quila profile image
Anilson Lopes

The discussion differs from the subject. It highlight the issue of developer skills, being the frontend.

Collapse
adithyanajay profile image
Adithya Ajay Author

Comment! What do you feel after reading this!