4

I prefer the CSS border-box model, and I guess a lot of other people do too:

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

However CSS Lint warns me:

The universal selector (*) is known to be slow.

Is that really the case here? Using the border-box model is perhaps the most common today, and I would be surprised if browsers did not optimize that. But maybe I am wrong?

DalSoft
  • 10,673
  • 3
  • 42
  • 55
Leo
  • 4,136
  • 6
  • 48
  • 72
  • Performance wise you have nothing to worry about. *Optimally* you'd just apply it to only the elements that need it, but it really has very little performance hinderance – Zach Saucier Mar 30 '14 at 20:37
  • Thanks @ZachSaucier. Do you know why CSS Lint warns about it? – Leo Mar 30 '14 at 23:09
  • It is warning you about the * selector, not the border-box model. It is just telling you that it is basically inefficient to apply that style to everything when it can be applied to only the elements that need it. – Patrick Allen Mar 30 '14 at 23:14
  • Yes, I thought so, @PatrickAllen, but border-box is really a special case. Probably very common so they could have avoided that warning in case it is not appropriate. (If CSS Lint is smart enough when parsing of course. I have no idea about that.) – Leo Mar 30 '14 at 23:26
  • Yeah, I agree with that... I usually use the * selector when using `border-box` as well. – Patrick Allen Mar 30 '14 at 23:33

1 Answers1

2

The universal selector (*) is known to be slow.

Well, slower than other things, yeah. You should try not to use it (in most cases), yeah. But it is not slow enough for you to be worried about it unless you're trying to animate 10000 elements.

Personally, I think box-sizing should always be border-box because the box model feels natural that way. If you agree, it is perfectly appropriate to size all elements like this. Otherwise, only apply it where you need it.

Don't write code based on what lint tells you.

bjb568
  • 11,089
  • 11
  • 50
  • 71