Can I use "box-sizing: border-box;" in universal selector (*) every time? [closed]

Question

I just learned html css and currently I'm trying to improve my skills by practicing. Everytime I open a new html page I'm using *{box sizing: border-box;}. Is it okay to use it like this every time or should I use it in the codes that I need?

Answer 1

It’s not a right or wrong sort of thing. Depending on the situation, there’s good reasons for using either border-box or content-box. When creating something that needs precision in terms of size relative to others on the same row (e.g. a grid system that needs to total 100% per row), using border-box will simplify things and reduce surprises. But if you need precision with the sizing of an element relative to its interior (ex. a perfect fit around a fixed-size image), content-box makes more sense.

Answer 2

If you start a new project it might be ok and clean to add * { box-sizing: border-box; } at the beginning so you can use it on the entire project and everyone else developing on the project will see it.

BUT if you work on an existing project and then just add * { box-sizing: border-box; } somewhere could mess up the entire layout! So there it might be "safer" to only add it to the containers you are working on with something like .border-boxed-container * { box-sizing: border-box; }. Or have an extra class like "border-boxed" which you can add to every element accordingly the CSS .border-boxed { box-sizing: border-box; }