на днях задавал вопрос о правильном наименовании классов. Ребята отсюда посоветовали БЭМ. Начал читать и немного в затруднении. Попрошу ребята вас снова помочь )
Вопросы:
1) Давайте представим что я освоил бэм и начал верстать. Верстаю на базе бутстраповских классов и сетки. И тут возникает такой момент то что классы бутстрапа не соответствуют БЭМУ. Как вы считаете нормально ли будет выглядеть например:
1.1 <div class="navbar navbar-default navbar--red>
1.2.
<div class="col-md-6">
<div class="news-item,">
<div class="news-item__img"></div>
</div>
</div>
2. Теперь вернемся к реальности и я начал верстать крупный проект где 66 страниц и пока я только начал хочу сверстать проект на методологию БЭМ.
Можете одним глазом глянуть код и сказать сойдет ли так ? или лучше на бэм?
Вот сайт
3. Вот как у меня сейчас:
.user-bar .user-bar-avatar img {
width: 32px;
height: 32px;
}
И если переделать на БЭМ то должно выглядеть так?
.user-bar .user-bar__avatar .user-bar__avatar-img {
width: 32px;
height: 32px;
}
4. На сайте то что указал выше есть 3 состояния .navbar
a) Когда у
.navbar
нету фона и при скролле внизу к нему добавляется класс .navbar-light (добавляет белый фон)
Но тут проблема. Когда у навбара нету фона кнопки входа и смены языков должны быть белые а когда мы скролим и повляется белый фон у .navbar то кнопки должны быть черные.
Я реализовал это вот так:
.navbar-transparent .navbar-right-menu > li > .btn-white:hover {
color: #fff !important;
}
.navbar-transparent.navbar-light .navbar-right-menu > li > .btn-white:hover {
color: #000 !important;
}
Ужасно правда?) Как тут быть?