Why use/not use * box-Sizing?

Asked

Viewed 738 times

17

I’ve read a lot about debates between using or not using the property box-sizing: border-box; as follows:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

I know that it is very influential, especially in the elaboration of the layout, as interaction between borders, paddings, etc.

But why use it this way? Or why not use it? Once you are applying the style to all elements.

In some cases I used, I could notice an immense repetition of the properties when the DOM hierarchy was deep.

If it is not used this way, the correct thing would be to define only in the properties I will need?

Or rather, what is the real function of the property box-sizing? And what, in fact, is the best way to use this function?

css css3

  • I always use by default in all projects. Particularly I think a bag have to calculate in hand the size that the div will have to stay just because I put a border or a padding

  • So. I tried to start a layout without using this definition, because the repetition of it bothered me. But I’m more bothered by the lack of it than the excess. Even though I’m not sure what the real pros and cons of it are.

  • According to the MDN The box-Sizing CSS property is used to change the standard box model property used to calculate widths (widths) and heights (Heights) of the elements. It is possible to use this property to emulate the behavior of browsers (browser) that do not correctly support the specification of the CSS box model property.

  • The Foundation uses both *, and *:after, *:before. And so do I.

  • 2

    I understand that the use of * or does not give an interesting discussion, independent of the box-Sizing, by the issues of ease of applying in everything versus the impact on the DOM. The box-Sizing is a property like any other, which is used as needed. In fact it is a property that corrects one of the largest ***adas of w3c in my view (that IE was the only browser to do what was sensible).

  • 2

    Complementing: if you are going to use *, you have a much better proposal in this article here, which changes the whole HTML box, and inherits in the rest of the elements (inherit): https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

  • @Bacco Very well put! So far it seems to me the best method to use. What I thought would get in the way of, or not be the best practice, was the fact that I repeated the property in a, say, "out-of-control" way. I’ll see what I can assemble on top of that concept!

  • I only use it when necessary. I don’t apply it to *.

Show 3 more comments

2 answers

6

This article by Sergio Lopes talks about the subject and shows how the specification of box-model is confusing.

You use this property to define that, the size of an element must be calculated from its edge. The simplest way to understand is with a snippet:

.a, .b {
  border: 20px solid #000;
  background: skyblue;
  font-size: 4em;
  margin: 2px;
  height: 100px;
  width: 300px
}

.b {
  box-sizing: border-box
}
<div class='a'>sopt</div>
<div class='b'>sopt</div>

Note that both elements are 300 pixels wide.

The height and width of .a are calculated considering only its content (default value: box-sizing:content-box), edges and padding are not included in the calculation and if you include a border: 20px solid #ccc the size of your box will be 200px + 40px.

With the border-box, calculation will be the size of the box including the inner edge and margin.

If to answer "Why use?" I would simply say to avoid surprises during development.

  • Yes, that concept I understood. But why many use it applied to * and others already prefer to apply directly to the element that is needed, either through a proper attribute, complement class or extra functions (such as a @include / @extend in SASS)?

  • 2

    This is the choice of those who develop, have no way to respond. Guessing, maybe some developers think that applying a property to a universal selector is bad (from a performance point of view). But it’s not like that.

6


There are two big reasons why you want to standardize the box model in your documents, or at least in a part of them:

  1. You want or need to use the model "traditional" (border-box, the old model that everyone used, and that survived longer in IE), which is more intuitive and may be the only solution in certain situations of intricate layout.

  2. You are styling a form and nothing seems to make sense. That’s because Form elements use different box models with each other, until today, in several browsers. Even certain elements are still provided by the operating system, and not by the browser (the "replaced" elements in the language of CSS).

You can see that at least standardizing the box model of the forms is a sensible decision. As for standardizing everything - changing box-sizing for the element html, and the rest saw inheritance with *, *:before, *:after, is at your discretion. Regardless of which box model you decide to work with, there could always be some specific case where the other box model would be a hand on the wheel. In such cases you can apply box-sizing individually as needed.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.