AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

Что есть бэм и как он выглядит?

на днях задавал вопрос о правильном наименовании классов. Ребята отсюда посоветовали БЭМ. Начал читать и немного в затруднении. Попрошу ребята вас снова помочь )
Вопросы:
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;
}

Ужасно правда?) Как тут быть?
  • Вопрос задан
  • 549 просмотров
Пригласить эксперта
Ответы на вопрос 3
sim3x
@sim3x
Бутстрап и бем совместимы

sass
.news-item
  @extend col-md-6
  // override styles

.user-bar__avatar-img
....

Имена классов уникальны - потому нет нужды делать
.navbar-transparent .navbar-right-menu > li > .btn-white:hover
- хватит класса и названия елемента или псевдоклассов

ruby.bvision.com/blog/please-stop-embedding-bootst...
sass-lang.com/guide#topic-7
Ответ написан
SkiperX
@SkiperX Куратор тега CSS
Верстаю на базе бутстраповских классов и сетки

Бутстрап использует smass методологию
Это противоположность бема. Все что нужно о ней знать, это то, что её создатель сам перешел на бем и всем посоветовал.
И бутстрап и бем несовместимы.

Если интересны фреимворки, есть google material lite, он использует бем под капотом.
Сеток под бем тоже куча
Ответ написан
Комментировать
@oops-wrong
Вложенности и другие отношения в селекторах противопоказаны в БЭМ.
.navbar-transparent .navbar-right-menu > li > .btn-white:hover

Если приходится работать с Бутстрапом, то комбинирую подходы. БЭМ применяю только для своих собственных классов, а селекторы сетки и прочие Бутстраповские селекторы не трогаю в CSS.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы