[27/32] 100% Советы и рекомендации

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

Здравствуйте. Делал по типу заданий из курса “Последняя сетка”. К сожалению универсальных блоков создать не получилось, и приходилось часто вносить коррективы в классы. Хотелось бы услышать советы как оптимизировать данный код.

</head>
<body>
    <div class="header layout-positioner">
        <div class="layout-block">
    Header
        </div>
    </div>
    
    <div class="menu layout-positioner">
        <div class="layout-block">
    Menu
        </div>
    </div>
    
    <div class="promoblock layout-positioner">
        <div class="layout-block">
            <div class="layout-column-1">
    Promo 1
            </div>
            <div class="layout-column-1">
    Promo 2
             </div>
        </div>
    </div>
    <div class="contentbox">
        <div class="layout-block layout-positioner">
           <div class="layout-column-2"> 
           Left
    </div>
    <div class="layout-column-2"> 
           Main
    </div>
    
    <div class="layout-column-2"> 
           Right
    </div>
    </div>
    </div>
    <div class="footer layout-positioner">
        <div class="layout-block">
    Footer
        </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;
}

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

.header {
background:#34495e;
padding-top:10px;
padding-bottom:10px;
}

.layout-block {
min-height:25px;
width:340px;
margin:0 auto;
padding:5px;
}

.header .layout-block {
background:#c0392b;}

.menu {
background:#3498DB;
}

.promoblock {
background:#34495e;
padding-top:10px;
padding-bottom:10px;
}

.layout-column-1 {
background: #c0392b;
width:160px;
min-height:50px;
float:left;
margin-right:10px;
padding:5px;
}

.promoblock .layout-column-1:last-child {
margin-right:0px;}

.promoblock .layout-block {
width:350px;
padding:0px;
}

.contentbox{
padding-top:10px;
padding-bottom:10px;}

.contentbox .layout-block {

width:350px;
padding:0px;

}

.layout-column-2 {
background: #3498DB;
width:60px;
min-height:100px;
float:left;
margin-right:10px;
padding:5px;
}

.contentbox .layout-column-2:nth-child(2)
{width:180px;}

.contentbox .layout-column-2:last-child {
margin-right:0px;}

.footer {
background:#34495e;
}