Search code examples
htmlcssfrontend

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


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?


Solution

  • 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; }