search

jaydenseric / Barebones

A barebones boilerplate for getting started on a bespoke front end.
125 stars 6 forks source link

* Border box #3

Closed nickspiel closed 9 years ago

nickspiel commented 10 years ago

For more a more consistent and predictable box model.

Source http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

jaydenseric commented 10 years ago

I don't think your code is complete. A syntax error with the Bourbon box-sizing mixin for the pseudo elements and the * is not getting the property as per the article linked.

* {
    &:before, 
    &:after {
        box-sizing(inherit);
    }
}

Should be:

*,
*:before,
*:after {
    @include box-sizing(inherit);
}

Also the CSS had not been recompiled. I have recently stripped all the compiled files out of the repo so these sorts of changes will be easier to make from now on.

Flagged this as a discussion since I am not sure there is best-practice consensus.

With this technique, if you wanted to specifically size a container as content-box (which is fairly often), would not all the children / descendants then inherit content-box?

Small Twitter discussion regarding my view on * and border-box here.