6,492 reads

Why Not Use Good Old CSS3??? And Forget Bootstrap!

by Pedro H F DondaMarch 18th, 2020

Too Long; Didn't Read

When we start learning how to create a web page and are presented to CSS, it can be quite daunting (or exhilarating) to see the list of properties we can use. So many of them, so much we can do! So, when we're fumbling through the pages and are presented with "easy" ways to become web-developers, we grab them without a second thought.

Companies Mentioned

featured image - Why Not Use Good Old CSS3??? And Forget Bootstrap!

But beware the promises of the Dark Side, young padawan.

You can do big. You can do shiny. You can do squishy and with lots of effects, but BY THE LOVE OF THE INTERNET GODS, learn the regular first.

When you add that cool snippet of code you took from Stack Overflow without fully understanding your own code, you're bound to lose so many days debugging your page you'll be wanting to throw your computer on the wall in no time. I promise you, it won't be fun.

Believe: you can do AMAZING sites with plain simple CSS3 - without the use of any external frameworks. So, hear me, and hear me well: forget Bootstrap. No, drop that rock, let me explain.

I don't know if you already know about CSS Precedence Rules. If not, I'll explain, briefly, for the sake of those who already know.

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 when you have in another part of your CSS rule sheet that says that it should move only

1 pixel

? Then you have a question of Precedence. What rule is more important?

The rule to be applied first is the more specific one. This is the Specificity Rule. For example: if you apply

color: blue

to all

h1

, this has a lesser specificity than a

h1

with an ID of

"title-of-article"

. Remember, if more are being targeted, then it is less specific. So:

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

In this case, all

h1

will be 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 action, then we follow the sequence of declaration. The last to be declared, from top to bottom, will be the one to be really 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 first black, and then became white. We can't actually 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 will happen, you can decide where to put it in you CSS sheet, and take full control of your website.

Padawan, these were just the good ways of the Force, but I must talk about something Dark, something forbidden. Something that is... bad practice. I must talk about the use of the !important. To complete your training, padawan, you must understand it. When you apply a rule in your CSS sheet, you can, beside it, write "

!important

", and the browser will be kind of mind-controlled to recognize it as more important than anything else in the whole multiverse, no matter the order of Precedence. It breaks the natural order of things, padawan! It's unnatural! Let's say you use it once, you may remember of it when you're debugging, but the temptation of making every rule you make just as important as the other is too great. 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. 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 (yes I am) you shouldn't use Bootstrap (but yes, you shouldn't), 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 really have to learn HTML and CSS, through and through. You can't escape it, the website will be made withe these rules, and you must understand them. So roll up your sleeves, and find yourself good courses (there are thousands free around the Internet!) and practice, practice and practice.

One more note about Bootstrap. Do learn about it. As I said, it is part of your training, padawan. People will 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.

Padawan, there is no easy way. Only the good way.

Disclaimer: people of Twitter, you are all a lot more professional than me, and I would be most proud to work with you guys! Bootstrap was certainly an incredible advance for everyone at the time. I am by no means trying to diminish your work or ability or importance, please. Thank you for everything. I am a profound admirer of you guys, although a hater of Bootstrap, but we can't love everything, right?

Just... !important everywhere? Guys?

References:

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