Как улучшить header?

Question

[dk-web]

Набросал такую простую шапку
jsfiddle.net/duphwuqk
Буду признателен за комментарии...
Что можно было бы упростить/улучшить/к сделать максимально кросс-браузерным?
Что меня смущает... это svg=шная картинка... не знаю чем конкретно(

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

Answer 1

[Максим Будин]

* {
    box-sizing: border-box;
}

Но лучше для этого иметь спиленный под себя ресет.

Зачем нужен header_block?
Зачем пустой wrapper?

Я не даю советов, но задаю вопросы, дабы увидеть твою логику и понять где именно она порочна.

Comments

[dk-web]

Максим Будин - спасибо за ответ.
1) враппер не пустой... в него обернуто все кроме меню - отделял от nav
2) header_block - обертка для h1 p для выравнивания по центру header...
3) в ресете все присутствует - сюдя надергал основные моменты

Answer 2

[Дмитрий Антонов]

Ну сейчас бы я сделал бы как то так... Правда это уже БЭМ

<header class="header">

	<nav class="menu">
		<div class="menu__inner">

			<ul class="menu__wrapper">
				<li class="menu__item"><a href="" class="menu__link menu__link--active">1 Пункт</a></li>
				<li class="menu__item"><a href="" class="menu__link">2 Пункт</a></li>
				<li class="menu__item"><a href="" class="menu__link">3 Пункт</a></li>
				<li class="menu__item"><a href="" class="menu__link">4 Пункт</a></li>
			</ul>

		</div>
	</nav>

	<div class="header__bottom">
		
		<div class="logo">
			<div class="logo__inner">
				<a href="" class="logo__link"><img src="" alt="" width="" height=""></a>
			</div>
		</div>

		<section class="slogan">
			<div class="slogan__inner">
				<h1 class="slogan__title">Названии компании</h1>
				<p class="slogan__text">Ниже рисунок с помощью ксс  либо Img.... logo и slogan float</p>
			</div>
		</section>

	</div>


</header>

Comments

[dk-web]

про БЭМ что-то читал... не совсем понял про рисунок ниже....

[Дмитрий Антонов]

ну у тебя босле слогана ниже рисунок идет ......вот его либо бэкграундом либо картинкой...

[Александр Маджугин]

dk-web: БЭМ модная и хорошая штука на практике. Крайне удобно при поддержке. Но БЭМ убивает всю идею CSS как такового вообще. Комильфо, но не фэншуй.

[dk-web]

Дмитрий Антонов: я тогда наверное не понял все же отличия БЭМ от мною реализованного(сорр - на первый взгляд все то же самое... )

[Александр Маджугин]

dk-web: Не совсем. Во-первых БЭМ накладывает правила на имена классов. Во-вторых, вот же: header .header_block h1 - наследование.
В БЭМ это был бы селектор .slogan__title без зависимости от вложенности.

[Дмитрий Антонов]

Вообщем давай по порядку БЭМ это (Блок Элемент Модификатор). Мы структурируем сайт блоками и эти блоки мы можем помещать в любую часть сайта.... но не это самое главное.... мы уходим от наследования классов которое сложно поддержать от роста проекта( чем больше проект тем больше элементов и плохая поддержка из за наследования ), здесь такого нет если мы и будем использовать один блок и захочем что бы они выглядили по разному (цвет, фон, подчеркивание, анимация и т.д ) мы не будем создавать новый блок....мы просто добавим к нему МОДИФИКАТОР а так еще, все эти блоки могут использоваться в других проектах... А суть все этого Мы должны все элементы сайта отделять друг от друга, что бы они не пересекались.... в ксс это наследование в JS это использование классов (Тут либо используем id либо класс с приставкой js- (.js-slogan)) Скажу честно сам перешёл на БЭМ не давно еще наверно многое не правильно воспринимаю....но сама идея очень нравится.

Answer 3

[Александр Маджугин]

Еще вопросов:
Зачем nav вынесен за header?
Зачем внутри h1 span?

Comments

[dk-web]

1) потому что отдельный блок... другой фон и т.д. - криминалити?)
2) это была фишка сделать белую толстую рамку... не убрал видимо.
Александр Маджугин

[Александр Маджугин]

dk-web: 1) Ну не семантично типо. Я бы объединил все в heder и просто часть хедера сделал отдельным от меню блоком со своим фоном.
2) А, ну так-то да. Но если оборачивается весь слоган в рамку, то лучше сделать отдельный стиль header h1 {}. Спан я считаю нужен чтобы выделять ЧАСТЬ текста в другом блоке, а не весь текст.

[dk-web]

Александр Маджугин: спасибо за комментарии. учту