Испытание: строим сетку [27/32] (100%) - Кодревью

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

Здравствуйте.
Буду очень признательна, если кто-либо из более опытных товарищей посмотрит и выскажет свои замечания/предложения по качеству кода.

HTML:

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <header class="page-header">
            <div class="positioner-horizontal positioner-vertical">
                <div class="page-header-content">
                    Header
                </div>
            </div>
        </header>
        <nav class="main-menu">
            <div class="positioner-horizontal">
                <div class="main-menu-content">
                    Menu
                </div>
            </div>
        </nav>
        <div class="promos">
            <div class="positioner-horizontal positioner-vertical clearfix">
                <div class="promos-item">
                    Promo 1
                </div>
                <div class="promos-item">
                    Promo 2
                </div>
            </div>
        </div>
        <main>
            <div class="positioner-horizontal positioner-vertical clearfix">
                <div class="main-content">
                    <div class="main-content-col main-content-col-left">
                        Left
                    </div>
                    <div class="main-content-col main-content-col-right">
                        Right
                    </div>
                    <div class="main-content-col main-content-col-main">
                        Main
                    </div>
                </div>
            </div>
        </main>
        <footer class="page-footer">
            <div class="positioner-horizontal">
                <div class="page-footer-content">
                    Footer
                </div>
            </div>
        </footer>
    </body>
</html>

CSS:

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.positioner-horizontal {
    margin: 0 auto;
    width: 350px;
}
.positioner-vertical {
    padding-top: 10px;
    padding-bottom: 10px;
}
.page-header {
    background: #34495e;
}
.page-header-content {
    padding: 5px;
    min-height: 25px;
    background: #c0392b;
}
.main-menu {
    background: #3498DB;
}
.main-menu-content {
    padding: 5px;
    min-height: 25px;
}
.promos {
    background: #34495e;
}
.promos-item {
    float: left;
    margin-right: 10px;
    padding: 5px;
    width: 160px;
    min-height: 50px;
    background: #c0392b;
}
.promos-item:last-child {
    margin-right: 0;
}
.main-content-col {
    padding: 5px;
    min-height: 100px;
    background: #3498DB;
}
.main-content-col-left {
    float: left;
    margin-right: 10px;
    width: 60px;
}
.main-content-col-right {
    float: right;
    margin-left: 10px;
    width: 60px;
}
.main-content-col-main {
    margin-right: 80px;
    margin-left: 80px;
}
.page-footer {
    min-height: 35px;
    background: #34495e;
}
.page-footer-content {
    padding: 5px;
}

Заранее спасибо :slight_smile:

2

Выделение этих двух свойств в отдельное правило перегружает html-код. И попробуйте сократить названия некоторых классов, есть прям очень длинные.

1 лайк
3

Спасибо большое :slight_smile:

На счёт выделения .positioner-vertical - полностью согласна. Подправила код с учётом этого замечания.
А на счёт имён классов - это я параллельно сложный макет верстала, и под впечатлением от БЭМ голова была способна генерировать только сложные и уникальные селекторы. Как говорили на интенсиве - главное единообразность :slight_smile: А она тут вроде прослеживается, для меня во всяком случае

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <header class="page-header">
            <div class="positioner">
                <div class="page-header-content">
                    Header
                </div>
            </div>
        </header>
        <nav class="main-menu">
            <div class="positioner">
                <div class="main-menu-content">
                    Menu
                </div>
            </div>
        </nav>
        <div class="promos">
            <div class="positioner clearfix">
                <div class="promos-item">
                    Promo 1
                </div>
                <div class="promos-item">
                    Promo 2
                </div>
            </div>
        </div>
        <main>
            <div class="positioner clearfix">
                <div class="main-content">
                    <div class="main-content-col main-content-col-left">
                        Left
                    </div>
                    <div class="main-content-col main-content-col-right">
                        Right
                    </div>
                    <div class="main-content-col main-content-col-main">
                        Main
                    </div>
                </div>
            </div>
        </main>
        <footer class="page-footer">
            <div class="positioner">
                <div class="page-footer-content">
                    Footer
                </div>
            </div>
        </footer>
    </body>
</html>

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.positioner {
    margin: 0 auto;
    width: 350px;
}
.page-header {
    background: #34495e;
    padding-top: 10px;
    padding-bottom: 10px;
}
.page-header-content {
    padding: 5px;
    min-height: 25px;
    background: #c0392b;
}
.main-menu {
    background: #3498DB;
}
.main-menu-content {
    padding: 5px;
    min-height: 25px;
}
.promos {
    background: #34495e;
    padding-top: 10px;
    padding-bottom: 10px;
}
.promos-item {
    float: left;
    margin-right: 10px;
    padding: 5px;
    width: 160px;
    min-height: 50px;
    background: #c0392b;
}
.promos-item:last-child {
    margin-right: 0;
}
.main-content {
    padding-top: 10px;
    padding-bottom: 10px;
}
.main-content-col {
    padding: 5px;
    min-height: 100px;
    background: #3498DB;
}
.main-content-col-left {
    float: left;
    margin-right: 10px;
    width: 60px;
}
.main-content-col-right {
    float: right;
    margin-left: 10px;
    width: 60px;
}
.main-content-col-main {
    margin-right: 80px;
    margin-left: 80px;
}
.page-footer {
    min-height: 35px;
    background: #34495e;
}
.page-footer-content {
    padding: 5px;
}