Здравствуйте! Очень волнует правильность использования названий классов, как можно сократить этот код, да и вообще, какие есть рекомендации и замечания. Спасибо!
<body>
<div class="header">
<div class="layout-positioner">
<div class="layout-header">
<div class="text">
Header
</div>
</div>
</div>
</div>
<div class="menu">
<div class="layout-positioner">
<div class="layout-menu">
<div class="text">
Menu
</div>
</div>
</div>
</div>
<div class="promo">
<div class="layout-positioner">
<div class="layout-promo">
<div class="text">
Promo 1
</div>
</div>
<div class="layout-promo">
<div class="text">
Promo 2
</div>
</div>
</div>
</div>
<div class="columns">
<div class="layout-positioner">
<div class="layout-column">
<div class="text">
Left
</div>
</div>
<div class="layout-column">
<div class="text">
Main
</div>
</div>
<div class="layout-column">
<div class="text">
Right
</div>
</div>
</div>
</div>
<div class="footer">
<div class="layout-positioner">
<div class="layout-footer">
<div class="text">
Footer
</div>
</div>
</div>
</div>
</body>
html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.text{
padding:5px;
}
.layout-positioner{
width:350px;
margin:0 auto;
/border: 2px solid green;/
}
.layout-positioner:after{
content:’’;
display:block;
clear:both;
}
.header{
padding:10px;
background:#34495e;
}
.layout-header{
min-height:35px;
background:#c0392b;
}
.menu{
background:#3498DB;
}
.layout-menu{
min-height:35px;
}
.promo{
padding:10px;
background:#34495e;
}
.layout-promo{
float:left;
width:170px;
min-height:60px;
margin-right:10px;
background:#c0392b;
}
.layout-promo:last-child{
margin-right:0px;
}
.columns{
padding:10px;
}
.layout-column{
float:left;
width:70px;
min-height:110px;
background:#3498DB;
}
.layout-column:nth-child(2){
width:190px;
margin-left:10px;
margin-right:10px;
}
.footer{
background:#34495e;
}
.layout-footer{
min-height:35px;
}