Easy to maintain CSS or light HTML?

I am responsible for managing the entire website IT website (both infrastructure and development), and I have a difference of opinion with the lead developer of the interface. His approach is to create separate classes, each of which brings one functionality, and combines as many classes as necessary to style the element:

HTML
<div class="float_left padding_10 width_60_percent"></div>
<div class="float_left width_30_percent"></div>
<div class="float_left padding_10 width_10_percent"></div>
CSS
.float_left { float: left; }
.padding_10 { padding: 10px; }
.width_60_percent { width: 60%; }
.width_30_percent { width: 30%; }
.width_30_percent { width: 10%; }

Pros:

- understanding CSS through HTML : you can understand what CSS does by simply looking at the class names in HTML.
- ease of creation . Once you have defined your set of classes, it’s just a matter of combining them in HTML, you don’t need to constantly write new CSS. - ease of maintenance : the same reason as above.
- tolerance . You can use the same approach for any website you are working on (which makes sense for him, as he is a contractor working on different projects). - less CSS: until your layout reaches a certain critical size, as a result of which the same classes are repeated and repeated (which will be in the case of the correct layout, but, obviously, is not reflected above due to the brevity of the example).

Minuses:

- more HTML .
- HTML is harder to read if you are not interested in the CSS part (which my backend developers do not create, not views). - harder to integrate Javascript based on class selectors (we use jQuery).

/ CSS, , HTML- CSS, : , CSS, , HTML, , . , :

HTML
<div id="column_left"></div>
<div id="column_middle"></div>
<div id="column_right"></div>
CSS
#column_left { float: left; padding: 10px; width: 60%; }
#column_middle { float: left; width: 30%; }
#column_right { float: left; padding: 10px; width: 10%; }

/
, .

, HTML- :
- , SEO .
- , .

- "" -, , HTML . :

<?php
require_once 'simple_html_dom.php';
$pages = array('http://www.amazon.com', 'http://www.ebay.com', 'mywebsite.html', 'http://stackoverflow.com','facebook.html');
foreach ($pages as $page) {
    echo "\n$page\n";
    $html = new simple_html_dom();
    $string = file_get_contents($page);
    $total = mb_strlen($string);
    echo "HTML = " . $total . " characters\n";
    $html->load($string);
    foreach (array('id', 'class') as $attribute) {
        $count = 0;
        $elements = $html->find("*[$attribute]");
        foreach ($elements as $element) {
            // length of id or classes, + id="..." or class="..."
            $count = $count + mb_strlen($element->$attribute) + mb_strlen($attribute) + 3;
            //echo $element->$attribute . "\n";
        }
        echo "  -from $attribute attributes = $count -> " . round($count / $total * 100) . "%\n";
    }
}

:

http://www.amazon.com
HTML = 101680 characters
  -from id attributes = 943 -> 1%
  -from class attributes = 6933 -> 7%

http://www.ebay.com
HTML = 71022 characters
  -from id attributes = 1631 -> 2%
  -from class attributes = 4689 -> 7%

ourwebsite.html
HTML = 35929 characters
  -from id attributes = 754 -> 2%
  -from class attributes = 2607 -> 7%

http://www.imdb.com/
HTML = 74178 characters
  -from id attributes = 1078 -> 1%
  -from class attributes = 5653 -> 8%

http://stackoverflow.com
HTML = 204169 characters
  -from id attributes = 3376 -> 2%
  -from class attributes = 39015 -> 19%

facebook.html
HTML = 419001 characters
  -from id attributes = 6871 -> 2%
  -from class attributes = 85016 -> 20%

"" , , , id and class, , ( 2% 7% ). , , , , , /- :

Q1: / / ?

Q2: HTML- (, )?

, , , -, , id class ( , ):
- 1% 2% HTML-, id.
-4 - 7% HTML, classes.
- 20% HTML, classes.

Q3: (, Facebook Stackoverflow CSS) ?