Because most things on a page are not "just boxes". <header>, <article>, and <footer> are not "boxes" -- they have semantic meaning.
> Also, "class soup" is a proper CSS programming practice in many people's opinion -- many CSS style guides explicitly state that it's preferable to use descriptive class names in CSS rules, rathen than element names.
Everyone is welcome to their own opinion, but I'm of the persuasion that the fewer CSS rules the better. Not only does fewer CSS rules mean that there are fewer things to remember when styling a page, it also means a smaller file is requested.
It's better to use HTML like this...
<article> <hgroup> <h1>Page title</h1> <h4>Written by so-and-so in such-and-such categories.</h4> </hgroup> <p>This is a paragraph.</p> </article>
... than like this ...
<div class="content"> <h1 class="page-title">Page title</h1> <div class="meta-data">Written by so-and-so in such-and-such categories.</div> <p>This is a paragraph.</p> </div>
There is so much more semantic meaning in the former bit, than the latter.
Too, semantic HTML can help with SEO.
> Mainly because, as a site evolves, changing a single element name might break your entire CSS rule structure, while basing your CSS on class names makes everything much more robust and maintainable.
No need to argue with that. Building web apps is a whole other animal, and (having used Bootstrap) I can see why using lots of classes could be beneficial in certain situations.
However, I am still of the opinion that semantic HTML > "class soup".
Edit: I accidentally a word.