Fix global CSS bad practices

[staaky]

This CSS rule is affecting every third party script out there. Changing box-sizing on everything is a very bad practice:

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

It should be changed to target only the elements that need this so third party scripts aren't affected.

[hatefulcrawdad]

It can easily be overridden in the case you need it to be.

[staaky]

So why isn't it like that by default? Right now it's just bad.

[jurajkapsz]

To note: This also has a significant drawback on CSS rendering performance. Measured with Chrome's profiler.

I think FontAwesome project will remove this selector for this reason.

[nternetinspired]

@staaky Disagree. This is an incredibly useful rule, if you haven't read the explanation why, and the recommendation to use this rule by @paulirish you should:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

[staaky]

I don't see why someone would recommend such a thing, he wrote that in 2012, pretty sure he changed his mind by now. Global css rules like this, affecting everything related to layout are a bad practice if you want anything to work with third party scripts. You can't expect everyone out there to conform to something that isn't a default.

So a reset like that might seem useful if all you have to care about is your own code, but those are edge cases for most. If this is a framework that's supposed to advocate best practices such css rules just don't belong.

[nternetinspired]

It's recommended because it makes the box model behave as expected. It is incredibly useful and I very much doubt that @paulirish has changed his mind, he tends to update previous posts whenever that is the case.

[paulirish]

i still think border-box is fantastic. :)
I'm not alone either: https://twitter.com/search?q=box-sizing&src=typd&mode=realtime

also as another datapoint bootstrap 3 ships with border-box on everything. though in bootstrap's case it's not used on * but rather just their own components.

but since foundation is designed for global from-scratch projects, i think it makes a little more sense here. though certainly yeah.. it's a bit controversial.

most major 3rd party widgets have already addressed issues caused by the global border-box style.

[staaky]

@nternetinspired With content-box being the default that's what you'd expect as default behavior, not a reset to border-box. If you're expecting border-box as default you've not learned to work with content-box properly.

@paulirish yes, only using border-box on its own components is what I'd expect from foundation. I guess people just copy paste whatever you write as a best practice, not thinking about the best way to use it in their own context.

There's nothing wrong with border-box, just using it on * in a framework doesn't seem like the best way to go. Hopefully foundation will take some lessons from bootstrap here and address this.

[smileyj68]

Didn't realize it was THIS controversial, but okay. Foundation was developed primarily as a means for us to quickly build out client work, and having a consistent rule for how padding and sizes are calculated is much more efficient for our team and other teams that use Foundation than having to wrangle border-box AND content-box depending on what you're working with.

In general, we also prefer simplicity when it comes to philosophical decisions. border-box on * is simple, if we did it on the component level would we do it for all of them? Some? Which ones are more likely to be used with 3rd party plugins or scripts that don't plan for border-box and should we omit using it on those? Gets muddy. Good discussion, and if someone can sell us on a more specific approach we're all ears. Just our 2 cents.

[staaky]

I'm all for convenience and simplicity, but not when it breaks expected behavior. 3rd party scripts should just work without anyone having to deal with a global reset of the box-model.

A css rule that covers only foundation components could also be simple. Depending on how things are set up it could for example be something like [class^="f-"], [class^="f-"] * instead of *.

That might have to be more strict to make sure it only covers your own components. Content pulled into a component for example would ideally also have content-box, giving it the same box-model as when styled outside of a component. Any rule with a * will probably cover too much, but it could work when resetting specific elements within components to content-box.

Simple solutions will always have some kind of drawback, it all depends on how strict you want to be. If it was up to me simplicity would be a non-issue, I'd make sure to only cover my own components.