Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Table Display

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

is it a good practice to use box-sizing all the time?

Like in the video 

*{
 box-sizing: border-box ;}

is it a good practice to do that in evey CSS doc?

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Hi Muhammad,

First of all, I noticed you had a space between the border-box value and the semicolon in your declaration. Aside that, if you find it necessary to apply that declaration to every element, it's fine, but keep in mind that the universal selector (defined by the asterisk symbol) is the most expensive selector and it negatively affects page loading time. Inheritance from parent elements will not work when the universal selector is applied.

I'd say, the best approach is to specifically defined the elements of your choice at the top of your style sheet and assign the box-sizing: border-box; declaration to them. A bit like this.

div, ul, span {
box-sizing: border-box;
}

1 Answer

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points
Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Hi Muhammad!

I know this is already very late as a reply. I just want to share with you that using box-sizing: border-box will save a lot if time scratching your head. I can still remember when I was still starting out that I had to "resize" the width and "height" of divs to compensate when I am adding padding and border, because without box-sizing: border-box, they will all be added to the width and height of the element.

Just like using a reset stylesheet, I like to include a box-sizing snippet on top of every stylesheet I create. This is the snippet I use which I learned from using HTML5 Boilerplate:

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