I am currently beginning my forays into HTML and CSS. Already I have become frustrated at the standard box model setup where padding adds to the size of the box itself, so I’ve set in my CSS templating to use border-box models. Is this ok, or is it not recommended as a best practice / not recommended for learning HTML/CSS? Will many javascript/jQuery scripts break if I use it rather than the standard box model? I don’t want to get into the habit of using it if most developers shy away from it or if it will cause pre-made scripts and plugins to break.
The reason I am asking this is because it seems like there are some people who are disgruntled with the current box-model, and if there are any signs that the standard box model might be changing to the border-box model, then I may want to stick with it.
You are asking us if you should use the standard approach, or the non-standard approach. The answer is going to be: use the standard approach. Otherwise, you’ll always be fighting CSS.
The best analogy I found for the ‘standard’ mox model is to pretend you’re looking for a box to ship something and need to figure out the space needed. Your object is going to be a certain size, and then you need to leave room for all of your packing materials (the padding).
EDIT:
I admit that I wasn’t all that familiar with that CSS property. After doing some research, it does seem to have practical uses (especially when trying to divy up columns in a fluid layout). That said, I wouldn’t call it a replacement for the standard box model, but rather an alternative to use when it makes sense to use it. Learn the standard box model, and then you’ll know when it makes sense to alter it.