Why you should use CSS3 over Bootstrap

The Lazy Artist Gallery at Pexels

When we start learning how to create a web page and learn about CSS, it can be quite daunting to see the list of properties we can use. So many of them, so much we can do! So, when we’re reading through the pages and discover “easy” ways to become web-developers, we can be tempted to grab them without a second thought.

But beware of the temptation to take the easy path.

Your career is much more fulfilling if you learn the basics.

When you add that snippet of code you took from Stack Overflow without fully understanding your code, you’re bound to lose so many days debugging your page you’ll be wanting to rage quit. It won’t be fun.

You can do AMAZING sites with plain pure CSS3 – without the use of any external frameworks. Forget Bootstrap; you don’t need it.

I don’t know if you already know about CSS Precedence Rules. If not, I’ll explain briefly.

CSS is a list of rules. You write something like margin-right: 3px, and it will move 3 pixels away from the right margin. However, what happens if somewhere else in the CSS rule sheet it says that it should move only 1 pixel? Then you have a question of Precedence. What rule is more important?

The Specificity Rule states that the first to be applied is the more specific one. For example: if you apply color: blue to all h1, this has a lesser specificity than an h1 with an ID of title-of-article. Remember, if more are targeted, then it is less specific. So:

h1 { color: blue; }
h1 #title-of-article { color: red; }

In this case, all h1 are blue, except for the h1 that we deliberately gave an ID to manipulate the Precedence Rule and apply the style to it.

If no Specificity Rule is on the action, then we follow the sequence of declaration. The last to be declared, from top to bottom, is the one to be applied, not because the first wasn’t applied, but because it was applied, and then overridden.

p {color: black; }
p {color: white; }

So, all our paragraphs were the first black and then became white. We can’t see it, because they’re rendered before they’re displayed to us, but that’s how it happens. For our eyes, the last one is what counts. Since you know how it happens, you can decide where to put it in your CSS sheet, and take full control of your website.

Now we must talk about the use of the !important override. When you apply a rule in your CSS sheet, you can write !important after it, and the browser recognizes it as more important than anything else, no matter the order of Precedence. It breaks the natural order of things. Let’s say you use it once, you may remember it when you’re debugging, but the temptation of making every rule you make just as important as the other is too high. To debug it later is a nightmare.

And that’s where we get to Bootstrap, my padawan. Everything in Bootstrap, EVERYTHING, has !important. So give goodbye to all CSS rules of Precedence, because you won’t be using them. Do you want to change how round is the corner of that “card” class? Forget it. Oh, you want to apply a specific size of padding, say 0.3rem, but they only give you 0.25rem (p-1) or 0.5rem (p-2)? That’s too bad. And you can’t override easily, because their rules are all !important, so you’ll soon feel like you just cursed your website. You either use it in their style, or you remove Bootstrap entirely. If you know Bootstrap, you’ll soon notice that all sites that use it look pretty much the same.

So, I’m not saying you shouldn’t use Bootstrap, but if you want to be a free web-developer, able to fully customize your website and create a product that completely fulfills the needs of your client, you have to learn HTML and CSS, through and through. You can’t escape it, the website is made with these rules, and you must understand them. So roll up your sleeves, and find yourself excellent courses (there are thousands free around the Internet!) and practice, practice and practice.

It’s ok to learn about Bootstrap, since people do use it, and you’ll have to debug their sites (and have lots of patience with it). So you better understand it. But don’t fall for the promise of the “easy” and tempting ways to “quickly” become web-developers.


CODEDGAR. (2019, Dec 20) Why I don’t use Bootstrap anymore. Retrieved from: https://dev.to/codedgar/why-i-don-t-use-bootstrap-anymore-b8

jenkov.com (n.d.) CSS Precedence. Retrieved from: http://tutorials.jenkov.com/css/precedence.html

The !important exception. (n.d.) The MDN Web Docs. Retrieved from: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity