27/32 Оцените пожалуйста код, в чем минусы такого подхода

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="darkblue pad-10">
            <div class="header w-350 pad-5 red">Header</div>
        </div>
        <div class="blue">
            <div class="menu w-350 pad-5">Menu</div>
        </div>
        <div class="darkblue pad-10">
            <div class="w-350 clearfix">
                <div class="promo pad-5 red">Promo 1</div>
                <div class="promo pad-5 red">Promo 2</div>
            </div>
        </div>
        <div class="w-350 pad-10 clearfix">
            <div class="left pad-5 blue h-140">Left</div>
            <div class="right pad-5 blue h-140">Right</div>
            <div class="main pad-5 blue h-140">Main</div>
        </div>
        <div class="darkblue">
            <div class="w-350 pad-5 footer">Footer</div>
        </div>
    </body>
</html>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}


/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

div {
    box-sizing: border-box;
    margin: auto;
}

.w-350 {
    width: 350px;
}

.pad-5 {
    padding: 5px;
}

.pad-10 {
    padding: 10px 0;
}

.darkblue {
    background: #34495e;:
}

.blue {
    background: #3498DB;
}

.red {
    background: #c0392b;
}

.header {
    height: 35px;
}

.menu {
    height: 35px;
}

.promo {
    width: 170px;
    height: 60px;
    float: left;
}

div.promo:last-of-type {
    margin-left: 10px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.h-140 {
    height: 110px;
}

.left {
    width: 70px;
    float: left;
}

.right {
    width: 70px;
    float: right;
}

.main {
    margin: 0 80px;
}

.footer {
    height: 40px;
}
2

Это плохой подход. У вас фактически на каждое почти свойство отдельное правило.
Четыре класса у одного элемента - это уже перебор.
Имена классов в коде должны отражать содержимое элемента, его назначение в разметке, а не цвет или размер.
А в целом идея достаточно экзотическая, раньше видеть не приходилось.