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

Question

[Alibek Kulseitov]

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

Ужасно правда?) Как тут быть?

Answer 1

[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

Comments

[Alibek Kulseitov]

То есть вы имеете ввиду .navbar-transparen .btn-white:hover так ?

[sim3x]

Алибек Кулсеитов:

.submenu
  @extends .navbar-transparen 

.submenu__button:hover
  @extends .btn-white:hover

Answer 2

[Алекс Глебов]

Верстаю на базе бутстраповских классов и сетки

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

Если интересны фреимворки, есть google material lite, он использует бем под капотом.
Сеток под бем тоже куча

Answer 3

[oops-wrong]

Вложенности и другие отношения в селекторах противопоказаны в БЭМ.

.navbar-transparent .navbar-right-menu > li > .btn-white:hover

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