Оцените верстку пожалуйста

[parliament]

Доброго времени суток.

Прошу критики в свой адрес по поводу сверстанного макета. Нашел его на просторах нашего форума

 

     верстка

 

     

 

Сразу походу если Вы не против я спрошу:

•      не могу понять vertical-align?
•      как верстать, чтобы sidebar и content были равной высоты
•      начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк?  Я даже на хост сайт выложил а они все виситед.
•      почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать?

[abrahadabra]

такое ощущение, что этот макет уже где-то встречался.
 
Значит поругать… ок, попробуем.
Градиент на фоне в данном случае не обязательно делать картинкой, можно именно градиентом.
Навешивать стили на тэги имеет смысл тогда, когда все тэги должны выглядеть именно так. Условно говоря, h1 { font-size: 32px; } — это нормально. span { color: #900; } — уже не очень. Даже когда это #content h1 span { color: #900; } Ссылки должны реагировать на наведение. Особенно в главном меню.
Надпись в футере неправильно прилипла к контенту.
 
По вопросам.

не могу понять vertical-align?

с ходу что-то не получилось найти, но есть классная статья на css-live.ru, где эта тема разобрана детально. Рекомендую.
 

начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк?  Я даже на хост сайт выложил а они все виситед.

ну а как определяется, посещена ли ссылка? По адресу.
 

как верстать, чтобы sidebar и content были равной высоты

Правильный способ — flexbox. Но если поддерживать ископаемые браузеры, то display: table-cell
 

почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать?

делать градиент градиентом.

[parliament]

такое ощущение, что этот макет уже где-то встречался.

 

Значит поругать… ок, попробуем.

Градиент на фоне в данном случае не обязательно делать картинкой, можно именно градиентом.

Навешивать стили на тэги имеет смысл тогда, когда все тэги должны выглядеть именно так. Условно говоря, h1 { font-size: 32px; } — это нормально. span { color: #900; } — уже не очень. Даже когда это #content h1 span { color: #900; } Ссылки должны реагировать на наведение. Особенно в главном меню.

Надпись в футере неправильно прилипла к контенту.

 

По вопросам.

не могу понять vertical-align?

с ходу что-то не получилось найти, но есть классная статья на css-live.ru, где эта тема разобрана детально. Рекомендую.

 

начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк?  Я даже на хост сайт выложил а они все виситед.

ну а как определяется, посещена ли ссылка? По адресу.

 

как верстать, чтобы sidebar и content были равной высоты

Правильный способ — flexbox. Но если поддерживать ископаемые браузеры, то display: table-cell

 

почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать?

делать градиент градиентом.

 

Спасибо. Понял так нужно больше классов определять?

[Sergey_K_2015]

Спасибо. Понял так нужно больше классов определять?

 

Если придерживаться методологии БЭМ,  то классами нужно все определять. И стили задавать только классам. У такого подхода масса достоинств:

• при стилизации элемента обращение происходит только к одному селектору;
• быстрее рендерится страница;
• четкая структура файлов для css/js;
• реиспользование кода в любых частях страницы;
• понимание, к какому файлу стилей относится данный элемент;
• разделение классов для стилизации и js;
• не используется каскад стилей.

Это достоинства, приводимые в описаниях данной методологии. От себя я бы добавил еще и то, что при правильном определении имен классов нет необходимости в комментариях, т.к. и так все видно.

Для примера возьмем Ваше главное меню:

 

<div id="wrap_menu" class="clearfix">            

                        <ul id="nav">

                            <li><a href="/"><span class="first">Home</span></a></li>

                            <li><a href="#"><span>Services</span></a></li>

                            <li><a href="#"><span>Support</span></a></li>

                            <li><a href="#"><span>Carrers</span></a></li>

                            <li><a href="#"><span>About</span></a></li>

                            <li><a href="#"><span class="last">Contact</span></a></li>

                        </ul>            

</div>   

Смотрим его стилизацию (я сами стили заменил многоточиями, т.к. для понимания сути этого достаточно):

#nav {

  ...

}

#nav li {

  ...

}

#nav li a span {

 ...  

}

#nav a {

 ...

}

#nav .last {

 ...

}

и аналогичное меню с заданными классами:

<nav class="main-header--nav main-header--mobile">                

                    <ul class="main-menu clearfix">

                        <li class="main-menu--item"><a class="main-menu--link link" href='#>about</a></li>
                        <li class="main-menu--item"><a class="main-menu--link link" href="#">projects</a></li>

                        <li class="main-menu--item"><a class="main-menu--link link" href="#">gallery</a></li>

                        <li class="main-menu--item"><a class="main-menu--link link" href="#">houses</a></li>                    

                        <li class="main-menu--item"><a class="main-menu--link link" href="#">general plan</a></li>

                        <li class="main-menu--item"><a class="main-menu--link link" href="#">location</a></li>

                    </ul>

</nav>

и вариант его стилизации:

.main-menu  {

    ...

    &--item  {

        ...

        &:last-child  {

            ...

        }

    }

    &--link  {

       ...

        &:hover  {

            ...

        }

        &:active  {

           ...

        }

    }

}

Вопрос: для чего нужен такой уровень вложенности: #nav li a span?

Единственное, что приходит в голову - это то, что автору хочется как-то для себя структуризировать CSS файл, чтобы было визуально видно, какому элементу задается стиль. Но ведь этого можно добиться по другому. В моем примере стили описаны четко и понятно и нет никакой вложенности (правда такой вид наблюдается при работе с препроцессором Less, но он очень прост в освоении).

 

Теперь остальные замечания:

1. Зачем использовать <div class="header"> <div id="footer">? Есть же теги <header><footer><nav> и т.д.

2. Зачем использовать такие классы: class="first", class="last" если есть псевдоклассы :first-child, :last-child.

3. Зачем использовать для стилизации идентификаторы? Оставьте их для использования в скриптах.

[parliament]

Спаны,которые есть у меню, а как раз из-за них пришлось определить классы last и first вместо псевдоклассов они определялись для того что бы сделать разделители как на макете, ну т.е . уже чем блок меню и шире чем текст, ну и для того что бы при наведении затемнение было в пределах одного пункта по всей площади пункта. Да цель благородная была, я ее как видите не добился)))) 

Что касается БЭМ, то я предположил, что нужно HTML/CSS понять сначала. Ведь еще 5 лет назад люди с успехом верстали без БЭМ.

Вас же, Sergey_K_2015, благодарю за широкий отзыв. Все-все замечания учту

[Sergey_K_2015]

Спаны,которые есть у меню, а как раз из-за них пришлось определить классы last и first вместо псевдоклассов они определялись для того что бы сделать разделители как на макете, ну т.е . уже чем блок меню и шире чем текст, ну и для того что бы при наведении затемнение было в пределах одного пункта по всей площади пункта. Да цель благородная была, я ее как видите не добился)))) 

Что касается БЭМ, то я предположил, что нужно HTML/CSS понять сначала. Ведь еще 5 лет назад люди с успехом верстали без БЭМ.

Вас же, Sergey_K_2015, благодарю за широкий отзыв. Все-все замечания учту

Ну, если не заморачиваться уровнями вложенности, можно же было сделать таким образом: (a:first-child span),(a:last-child span).

Не нужно засорять код HTML лишним содержимым. Семантика не на последнем месте. Это же и касается <header><footer><nav> и прочих тегов.

Я так же, как и Вы нахожусь в стадии обучения. БЭМ использую не потому, что это модная фишка, а потому, что мне так реально удобнее верстать. Я почитал материалы по теме и нашел для себя много интересных вещей. Тут главное найти плюсы для себя, а к остальным вещам можно относиться без фанатизма (это же не религия в конце концов). Лучше сразу учиться правильной технике, чем потом переучиваться. По моим ощущениям, трудно на первых двух макетах. Задолбаешься придумывать имена классов, потом это происходит автоматом.

[parliament]

сделать таким образом: (a:first-child span),(a:last-child span).

 

В моем случае применение этих селекторов отменяет бордеры вообще

#nav a:first-child span {

   border-left:none;

}

#nav a:last-child span {

   border-right:none;

}

вобщем не смог победить и соорудил костыль)))

Edited January 30, 2016 by parliament

[andrey7287]

@Sergey_K_2015

 

  В приведенном примере БЭМ используется не правильно. Через "--" задаётся модификатор (main-menu--open), а элемент через "__" (main-menu__item). И не стоит всем элементам давать классы, становитесь заложником технологии.

[alejandro13]

В Вашей верстке у логотипа какой-то дополнительный фон, которого не должно быть по макету.

Внутри блоков с контентом междустрочный интервал у Вас явно меньше, чем должен быть.

Опять же исходя из макета, фон у блока с навигацией явно имеет другие цвета и ссылкам надо дать хоть какой-то ховер - text-decoration:underline, например.

 Ну и в форме поиска я бы цвет тексту белый дал, а не черный)

[parliament]

В Вашей верстке у логотипа какой-то дополнительный фон, которого не должно быть по макету.

Внутри блоков с контентом междустрочный интервал у Вас явно меньше, чем должен быть.

Опять же исходя из макета, фон у блока с навигацией явно имеет другие цвета и ссылкам надо дать хоть какой-то ховер - text-decoration:underline, например.

 Ну и в форме поиска я бы цвет тексту белый дал, а не черный)

 

Вот же действительно я и не подумал. Спасибо)