27/32. 100%. Большой CSS. Оптимизировать?

Yury_Breyvo · 11.Июнь.2016 13:50:08

Испытание прошел, но код цээсэс вышел громоздкий. Я только начинаю, и не могу “опытным глазом” оценить: есть ли варианты сократить код или это так и надо?

HTML:

<body>
        <div class="header"> 
            <div class="head">Header</div>
            <div class="menu">Menu</div>
            <div class="column column-1">Promo 1</div>
            <div class="column column-2">Promo 2</div>
        </div>
        <div class="content">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
        </div>
        <div class="footer">
            Footer
        </div>
    </body>

CSS

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

.content {
min-height: 110px;
width: 350px;
margin-bottom: 10px;
margin: 0 auto;
padding: 10px;
}

.footer {
background-color: #34495e;
height: 30px;
padding-left: 55px;
padding-top: 5px;
}

.head {
background-color: #c0392b;
min-height: 25px;
margin-bottom: 10px;
width: 340px;
margin-left: auto;
margin-right: auto;
padding: 5px 5px;

}

.menu {
background-color: #3498DB;
padding-left: 55px;
padding-top: 5px;
height: 30px;
margin-bottom: 10px;
}

.column {
background-color: #c0392b;
width: 160px;
padding: 5px;
min-height: 50px;
}

.column-1 {
float: left;
margin-left: 50px;
}

.column-2 {
float: right;
margin-right: 50px;
}

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

.main {
background-color: #3498DB;
width: 180px;
float: left;
margin-right: 10px;
min-height: 100px;
padding: 5px;
}

.right {
background-color: #3498DB;
width: 60px;
float: right;
min-height: 100px;
padding: 5px;
}

Yury_Breyvo · 11.Июнь.2016 13:55:23

Начал вписывать большой текст в колонки, и он не форматируется по ширине блока, а ползет в белую экранную неизвестность. Это куда он? И как решить?

Ineska · 11.Июнь.2016 14:11:09

Конечно, есть варианты сократить код. Этим приемом вы уже пользовались в этом фрагменте:
<div class="column column-1">Promo 1</div>
<div class="column column-2">Promo 2</div>
Класс column у вас в css определяет общие свойства для двух колонок promo, а column-1 и column-2 - только свойства, которыми они отличаются.
Такой же прием можно использовать для колонок left, main и right.
Посмотрите другие темы на форуме, еще есть другой вариант для центрирования блоков в сетке.

Yury_Breyvo · 11.Июнь.2016 17:18:31

Решил переосмыслить подход, еще раз прогнал тему. Вот что вышло.

<div class="header"> <div class="layout-positioner"> <div class="header-box"> Header </div> <div class="menu"> Menu </div> <div class="promo promo1"> Promo 1 </div> <div class="promo"> Promo 2 </div> </div> </div> <div class="content"> <div class="layout-positioner"> <div class="block left"> Left </div> <div class="block main"> Main </div> <div class="block right"> Right </div> </div> </div> <div class="footer"> <div class="layout-positioner"> <div class="foot1"> Footer </div> </div> </div>

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

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

.header {
background-color: #34495e;
margin-bottom: 10px;
padding: 10px 0;
}

.content {
margin-bottom: 10px;
}

.footer {
background-color: #34495e;
}

.header .header-box {
background-color: #c0392b;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 10px;
min-height: 30px;
}

.header .menu {
background-color: #3498DB;
padding-top: 5px;
padding-left: 55px;
min-height: 30px;
margin-bottom: 10px;
margin-left: -50px;
margin-right: -50px;
}

.promo {
float: left;
background-color: #c0392b;
padding-top: 5px;
padding-left: 5px;
width: 165px;
min-height: 55px;
}

.promo1 {
margin-right: 10px;
}

.footer .foot1 {
padding-top: 5px;
padding-left: 5px;
min-height: 30px;
}

.block {
float: left;
background-color: #3498DB;
padding-top: 5px;
padding-left: 5px;
min-height: 110px;
}

.left {
margin-right: 10px;
width: 65px;
}

.main {
margin-right: 10px;
width: 185px;
}

.right {
width: 65px;
}

Как Вам такой вариант?

Ineska · 11.Июнь.2016 17:44:06

Блок menu не центрировали, поэтому такая некрасота осталась:
.header .menu {
background-color: #3498DB;
padding-top: 5px;
padding-left: 55px;
min-height: 30px;
margin-bottom: 10px;
margin-left: -50px;
margin-right: -50px;
}
А в целом уже гораздо лучше.

Yury_Breyvo · 11.Июнь.2016 18:25:08

А как же наследуемое свойство layout-positioner, которое центрирует все элементы? И оно же задает ширину, которую блоку menu как-то пробить надо…
Был еще такой вариант, но он тоже топорный.

.header .menu {
background-color: #3498DB;
padding-top: 5px;
padding-left: 55px;
min-height: 30px;
margin-bottom: 10px;
width: 395px;
margin-left: -50px;
}

Теоретически, можно еще один уровень вложенности задать для хедера. Тогда layout-positioner надо будет прописывать не для контейнера, а для каждого блока в отдельности. Но увеличивается html-код. Что оптимальнее в таком случае?

Yury_Breyvo · 11.Июнь.2016 18:46:35

Нашел выход в изменении кода header. То, что и говорил, увеличиваем html, но css принимает человеческий вид

<body>
        <div class="header">
            <div class="layout-positioner">
                <div class="header-box">
                    Header
                </div>
            </div>
            <div class="menu">
            <div class="layout-positioner">
                    Menu
            </div>
            </div>
            <div class="layout-positioner">
                <div class="promo promo1">
                    Promo 1
                </div>
                <div class="promo">
                    Promo 2
                </div>
            </div>
        </div>
        <div class="content">
            <div class="layout-positioner">
                <div class="block left">
                    Left
                </div>
                <div class="block main">
                    Main
                </div>
                <div class="block right">
                Right
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
                <div class="foot1">
                    Footer
                </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;
}

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

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

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

.header {
    background-color: #34495e;
    margin-bottom: 10px;
    padding: 10px 0;
}

.content {
    margin-bottom: 10px;
}

.footer {
    background-color: #34495e;
}

.header .header-box {
    background-color: #c0392b;
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
    min-height: 30px;
}

.header .menu {
    background-color: #3498DB;
    padding-top: 5px;
    padding-left: 5px;
    min-height: 30px;
    margin-bottom: 10px;
}

.promo {
    float: left;
    background-color: #c0392b;
    padding-top: 5px;
    padding-left: 5px;
    width: 165px;
    min-height: 55px;
}

.promo1 {
    margin-right: 10px;
}

.footer .foot1 {
    padding-top: 5px;
    padding-left: 5px;
    min-height: 30px;
}

.block {
    float: left;
    background-color: #3498DB;
    padding-top: 5px;
    padding-left: 5px;
    min-height: 110px;
}

.left {
    margin-right: 10px;
    width: 65px;
}

.main {
    margin-right: 10px;
    width: 185px;
}

.right {
    width: 65px;
}

Ineska · 11.Июнь.2016 18:49:33

Вот. Теперь всё хорошо. У меня вопросов к коду больше нет.

stud · 12.Июнь.2016 12:42:00

Не знаю как у вас, но у меня вопросов много: ошибки в коде видны не вооруженным глазом.
Во-первых код срабатывает на 90%, что уже говорит о многом.
Во-вторых, вы посмотрите на то, как оформляете футер и меню. Чтобы padding в футере работал верно - вы добавили дополнительный div после центровщика. В меню в хеадере вы же это проигнорировали. И вообще, имхо, нужночаще использовать box-sizing, чтобы не было проблем - код упрощается.
Так же по всему коду вы используете padding-top и padding-left. А если текста в блоках будет много, то снизу и справа у вас отсупов не будет от границ блока, что не есть хорошо. Так же некоторые места кода у вас повторяются несколько раз, хотя все можно уместить в одну строчку: я про блок контекста и margin-right и width.

Но, повторюсь, все это лишь мое мнение, а я такой же новичок как и вы.

Yury_Breyvo · 12.Июнь.2016 12:51:53

Спасибо за мнение! Потом займусь повторением темы и прогоню задание еще разок.

По поводу центровщика: сходу не смог решить задачку расширения блока меню на всю ширину родителя. Если применить ко всему хеадеру, то меню принимает те же рамки, заданные центровщиком (был дурацкий вариант с отрицательными маргинами). Поэтому, если заметили, центровщик в меню вложен, а для остальных элементов это родитель. Этот код у меня на 100% сработал… но проверю.
Про box-sizing - это свойство еще подробно не разбиралось, поэтому я его и не применял. Иду от и до, так сказать)