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

mrx3
mrx3
8,742 Points

Is it really okay to use *selector for box-sizing: border-box;

I was reading a few blog post last night, and I came across this a number of times dealing with the box model: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

I would like to know if anyone one here uses the above in their CSS? Is it okay to use why, or why not? Thanks in advance to any answers.

Here's a blog post link about the above code: http://css-tricks.com/international-box-sizing-awareness-day/

1 Answer

I use it on every site I do. The reasons I prefer is because it makes it easier working out widths. With it set like you have said then a div with a width of 500px and 50px padding for instance would be 500px wide whereas if you do not use border-box then you padding would make the div larger.

So to clarify it makes working out width/height easier.

mrx3
mrx3
8,742 Points

It seems to me that this would work well. Some people have commented that using the * will slow down the page, what are views on this Adam? Thank you for the comment.

Can't say I have worked on a site big enough to notice if it would have an impact on performance.