Всем привет.
Начал изучать БЭМ и столкнулся с некоторыми вещами, которые мне не совсем понятны. Из документации я понял, что независимый блок не должен знать о своем позиционировании и для этого применяются миксы.
У меня есть вот такая шапка:
Я решил, что она состоит из логотипа и навигации(navigation). Блок navigation я разделил на главную навигацию по сайту(site-navigation) и навигацию пользователя(user-navigation), чтобы эти блоки можно было переиспользовать, если это будет необходимо.
Сделал вот такую разметку:
<header class="page__header header">
<div class="header__wrapper">
<a href="#" class="header__logo">
<img src="../img/logo.svg" width="55" height="29" alt="Tripy logo">
</a>
<nav class="header__navigation navigation">
<ul class="navigation__site-navigation site-navigation">
<li class="site-navigation__item">
<a href="#" class="site-navigation__link">Home</a>
</li>
<li class="site-navigation__item">
<a href="#" class="site-navigation__link">About</a>
</li>
<li class="site-navigation__item">
<a href="#" class="site-navigation__link">Services</a>
</li>
<li class="site-navigation__item">
<a href="#" class="site-navigation__link">Price</a>
</li>
<li class="site-navigation__item">
<a href="#" class="site-navigation__link">Contact</a>
</li>
</ul>
<ul class="user-navigation">
<li class="user-navigation__item">
<a href="#" class="user-navigation__link">Login</a>
</li>
<li class="user-navigation__item">
<a href="#" class="user-navigation__link">Register</a>
</li>
</ul>
</nav>
</div>
</header>
И вот такие стили:
.page__header {
padding-top: 20px;
padding-bottom: 20px;
}
.header {
background-color: #ffffff;
&__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1170px;
margin: 0 auto;
}
&__navigation {
display: flex;
align-items: center;
}
}
.navigation {
&__site-navigation {
margin-right: 146px;
}
}
.site-navigation {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
&__item {
&:not(:last-child) {
margin-right: 40px;
}
}
&__link {
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-decoration: none;
color: #808080;
}
}
.user-navigation {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
&__item {
&:not(:last-child) {
margin-right: 30px;
}
}
&__link {
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-decoration: none;
color: #808080;
}
}
Не знаю правильно ли я сделал. Внешнее позиционирование я задал миксам. Но вот из-за разделения навигации, получилось дублирование стилей. Они отличаются только отступами между элементами. Но там еще будет разный hover. Если спискам задать один класс, то при hover же получится вложенность. Ну и сами блоки не получится использовать отдельно, так как у них не будет стилей.
Еще вот не знаю как правильно центрировать блоки. Видел, что многие создают обертку и вкладывают содержимое в нее и потом используют по всему сайту. Я сделал подобными образом, но задал максимальную ширину для класса header__wrapper, который еще и задает флексы. Но может правильней делать максимальную ширину для каждого блока миксом? Ведь может же быть ситуация, когда какой-то блок захотят изменить. Ну т.е добавить это для блока .page__header вот так:
.page__header {
padding-top: 20px;
padding-bottom: 20px;
max-width: 1170px;
margin: 0 auto;
}
Простой
Простой
Средний
