27/32

Курсы §15. Сетки
1

Добрый вечер! Хочу узнать более грамотное решение, если такое есть. Что-то мне подсказывает что можно было написать короче. Мой код:

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class='header'>
        <div class='header-top'>
            <div class='layout-positioner'>
                <div class='layout-column layout-column-1'>Header</div>
            </div>
        </div>
        <div class='header-menu'>
            <div class='layout-positioner'>
                <div class='layout-column layout-column-2'>Menu</div>
            </div>
        </div>
        <div class='header-promo'>
            <div class='layout-positioner'>
                <div class='layout-column layout-column-3'>Promo 1</div>
                <div class='layout-column layout-column-4'>Promo 2</div>
            </div>
        </div>
    </div>
    <div class='content'>
        <div class='content-box'>
            <div class='layout-positioner'>
                <div class='layout-column layout-column-1'>Left</div>
                <div class='layout-column layout-column-2'>Main</div>
                <div class='layout-column layout-column-3'>Right</div>
            </div>
        </div>
    </div>
    <div class='footer'>
        <div class='footer-box'>
            <div class='layout-positioner'>
                <div class='layout-column' class=>Footer</div>
            </div>
        </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 – синий
*/

.header-top {
background: #34495e;

}

.header-menu {
background: #3498DB;

}

.header-promo {
background: #34495e;

}

.layout-positioner {
width: 350px;
margin: 0 auto;
padding: 10px;

}

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

}

.header-menu .layout-positioner {
padding: 0;

}

.layout-column {
padding: 5px;

}

.header .layout-column-1 {
background: #c0392b;
min-height: 25px;

}

.header .layout-column-2 {
min-height: 25px;

}

.header-promo .layout-column {
background: #c0392b;
float: left;
width: 160px;
min-height: 50px;
margin-right: 10px;

}

.header-promo .layout-column:nth-child(2) {
margin-right: 0;

}

.content .layout-column {
background: #3498DB

}

.content .layout-column {
float: left;
margin-right: 10px;
min-height: 100px;

}

.content .layout-column:nth-child(3) {
margin-right: 0;

}

.content .layout-column-1,
.content .layout-column-3 {
width: 60px;

}

.content .layout-column-2 {
width: 180px;

}

.footer-box {
background: #34495e;
min-height: 35px;

}

.footer-box .layout-positioner {
padding: 0;

}

Буду рад любой критике, чтобы завтра со свежей головой разобрать свои ошибки)

2

Красиво оформили тему) Приятно смотреть.
Грубых ошибок я не вижу. В целом очень хорошо.
Много классов layout-column у вас получилось. Наверное, запутались немного. Разделение на .layout-column-$ (1, 2, 3, 4) считаю излишним.
Недочеты вижу только в группировке свойств. Когда уберете (1, 2, 3, 4) необходимость в этом разделении отпадет:

Вот здесь почему-то разделили:

А эти два правила как раз можно объединить:

3

CSS-правила объединил, действительно мой недочёт. Но для меня остался один спорный момент – разделение на .layout-column. В коде CSS появилось много псевдоклассов и я не знаю что хуже – разделение на классы с номерами для .layout-column или нагромождение CSS-кода псевдоклассами?

Вариант кода где убраны .layaut-column с номерами:

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

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

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

.header-top,
.header-promo,
.footer {
background: #34495e;
}

.header-menu {
background: #3498DB;
}

.layout-positioner {
width: 350px;
margin: 0 auto;
padding: 10px;
}

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

.header-menu .layout-positioner,
.footer-box .layout-positioner {
padding: 0;
}

.layout-column {
padding: 5px;
}

.header .layout-column,
.footer .layout-column {
background: #c0392b;
min-height: 25px;
}

.header-menu .layout-column,
.footer .layout-column {
background: none;
}

.header-promo .layout-column {
float: left;
width: 160px;
min-height: 50px;
margin-right: 10px;
}

.header-promo .layout-column:nth-child(2),
.content .layout-column:nth-child(3) {
margin-right: 0;
}

.content .layout-column {
background: #3498DB;
float: left;
margin-right: 10px;
min-height: 100px;
}

.content-box .layout-positioner .layout-column:nth-child(1),
.content-box .layout-positioner .layout-column:nth-child(3) {
width: 60px;
}

.content-box .layout-positioner .layout-column:nth-child(2){
width: 180px;
}
4

Вот это правило к нагромождению не относится. Это распространенная практика, когда отступ у последнего элемента обнуляется. Правда, будет лучше, если вы напишете :last-child.

А здесь немного не подумали. Если ширину колонок записать в верхнее правило, то второе получается уже не нужно, и с псевдоклассом остается только одно. Но и его можно чуть сократить (не обязательно прописывать всю вложенность):

5

Исправил, спасибо!