Как правильно разбить шапку на блоки?

Question

[Сергей Горячев]

Есть у меня вот такая шапка.


А вопрос вот в чем.
Первый блок - header. Это понятно.
А вот логотип, телефон, социальные ссылки и меню?
Это элементы хедера или отдельные блоки?
Если блоки, то как правильно их обозвать, при условии, что логотип и социальные ссылки будут дублироваться в других местах.

Answer 1

[dom1n1k]

Лично я сделал бы внутри блока .header еще 4 блока: логотип, телефон, социалки и меню.
Как-то приблизительно вот так:

.header
    .header__logo
        .logo
    .header__phone
        .phone
    .header__social
        .social
            .social__link .social__link--instagram
            .social__link .social__link--vkontakte
            .social__link .social__link--facebook
    .header__menu
        .menu
            .menu__item .menu__item--active
            .menu__item
            .menu__item

Comments

[Сергей Горячев]

Тут ведь не учитывается в именовании классов, что логотип и социальные иконки будут ещё и в подвале?

[Сергей delphinpro]

Sergey Goryachev: поэтому .social - это блок. он может использоваться в нескольких местах.
а элемент .header__social правильно его спозиционирует в шапке. Аналогично элемент подвала .footer__social займется позиционированием иконок в подвале. Сам блок иконок не должен заниматься своим позиционированием (никаких там margin, left, top, width и т.п.)

[dom1n1k]

Да, верно. Сам блок отвечает только за свой собственный вид, но не за свое позиционирование. Позиционированием занимается элемент родителя.

Answer 2

[Денис Букреев]

Я создаю элемент .header__logo и внутри него уже блок .logo - вполне гибко выходит: раскидываешь внутри шапки ее элементы как надо, а у блока независимо выставляешь свои стили.

Объединять классы в один элемент я бы не стал