Испытание [27/32] 100% - прошу оценить код


#1

Добрый день всем! Пятый день как начал изучать HTML/CSS с данным ресурсом))
Прошу оценить код, возможно подскажите как можно было упростить, либо сделать “более грамотно”.

<body>
        <div class="head-block">
            <div class="layout-positioner">
                <div class="header">
                    <div class="content">Header</div>
                </div>
                <div class="menu">
                    <div class="positioner-box">
                        <div class="content">Menu</div>
                    </div>
                </div>
                <div class="positioner-box">
                    <div class="promo">
                        <div class="content">Promo 1
                        </div>
                    </div>
                    <div class="promo">
                        <div class="content">Promo 2
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="features">
            <div class="layout-positioner">
                <div class="positioner-box">
                    <div class="column">
                        <div class="content">Left</div>
                    </div>
                    <div class="column">
                        <div class="content">Main</div>
                    </div>
                    <div class="column">
                        <div class="content">Right</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="positioner-box">
                <div class="content">Footer</div>
            </div>
        </div>
    </body>

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 – синий
*/
.layout-positioner {
    margin: auto;
}

.layout-positioner::after {
    content: "";
    display: table;
    clear: both;
}
    

.head-block, .footer {
    background-color: #34495e;
}
.header {
    background-color: #c0392b;
    margin: auto;
    width: 350px;
    min-height: 35px;
}

.layout-positioner {
    padding: 10px 0;
}

.content {
    padding: 5px;
}

.menu {
    background-color: #3498DB;
    min-height: 35px;
    margin: 10px 0;
}
.positioner-box {
    width: 350px;
    margin: auto;
}

.positioner-box::after {
    display: table;
    content: "";
    clear: both;
}

.promo {
    background-color: #c0392b;
    float: left;
    margin-right: 10px;
    width: 170px;
    min-height: 60px;
}
.positioner-box .promo:last-child{
    margin-right: 0;
}

.column {
    background-color: #3498DB;
    min-height: 110px;
    margin-right: 10px;
    float: left;
}
.positioner-box .column:first-child, .positioner-box .column:last-child {
    width: 70px;
}
.positioner-box .column:last-child {
    margin-right: 0;
}

.positioner-box .column:nth-child(2) {
    width: 190px;
}
.footer {
    min-height: 35px;
}

#2

Вставьте код правильно, форматировав его с помощью кнопки </> в редакторе сообщений.


#3

…а вот, теперь ок


#4

В вашем css-коде две распорки, почему так?


#5

Зачем два центровщика?


#6

Первая распорка layout-positioner действительно лишняя, не обратил внимания…

Два центровщика, тк первый layout-positioner центрует все внутри блока head-block,
а второй positioner-box изначально вводил чтобы отцентровать содержание блока меню, а потом показалось удобным использовать его дальше…


#7

Уберите из CSS

.layout-positioner {
    margin: auto;
}

.layout-positioner::after {
    content: "";
    display: table;
    clear: both;
}

И мне по-прежнему будет интересно – зачем в HTML два центровщика?