CSS Tips: Box Model #1

Hello, long time no see. This is the first series of CSS Tips that I want to share with you guys.

For now, we'll talk about CSS BOX Model. Okay, you might say that

Hmm, I think there are a lot articles talk about this, so what's the difference?

Wait, imagine if you have a flexible box model to some element, I means that you don't have to put !important to property value of box-sizing.

yeah, it will break the standard of better css writing style. and you will lose your time.

Now, let's get started.

First I will answer your question, what's the difference?

Applying Box Model The Right Way

Old Method

Simple, just need 3 lines of code. you can reduce it only 1 line actually. But it's not flexible as I said above.

*,*::before,*::after {
  box-sizing: border-box;
}

New Method

This is new method, and I prefer to put the box-sizing: border-box on root element (html tag) and use global values inherit if I want to use the same box sizing behavior as the root element.

html {
  box-sizing: border-box;
}
*,*::before,*::after {
  box-sizing: inherit;
}
// for example i have card component with different box-sizing value
.card {
  box-sizing: content-box;
}

That's all, and Thank you. I will write another cool CSS Tips for you guys. I'm also learn about CSS actually.

Bye.