Как правильно совмещать BEM и bootstrap grid?

Question

[WQP]

Здравствуйте, будет ли правильный данный код?

<section class="header">
	<div class="container">
		<div class="header__logotype">
			
		</div>

		<div class="row">
			<div class="col-md-8">
				<div class="header__nav">
					
				</div>
			</div>
		</div>
	</div>
</section>

Comments

[Сергей delphinpro]

всё норм.

Answer 1

[iBird Rose]

ну вообще если ты используешь бэм, то нужно сетку тоже делать свою желательно, но так как совмещение бэм и бутстрапа щас везде и повсюду, то да. такой подход можно считать нормальным.

Answer 2

[Олег]

Здравствуйте, будет ли правильный данный код?

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

Comments

[abbrakadabbra]

Можете привести пример такой работы? Очень интересно.

[Олег]

abbrakadabbra: Ссылки в данный момент нет, но в целом как-то так:

<div class="container page__container">
	<div class="row container__row">
		<div class="row__col row__col--xs-12 row__col--md-3">...</div>
		<div class="row__col row__col--xs-12 row__col--md-2">...</div>
	</div>
</div>

[kn1ght_t]

Олег: извращение)

[Олег]

kn1ght_t: Что именно?

Answer 3

[abbrakadabbra]

Дописываю классы и не парюсь, даже в элементам, где используются классы бутсртапа (row, container, col-), хотя каждый раз зависит от того какие стили несет мой класс. Например там, где есть ширина, отступы и т.д. создают вложенный див, чтобы не конфликтовать с бутстрапом.

Answer 4

[Serj-One]

.header__nav{
  @extend .col-md-8;
}

Либо через миксины, используя scss вариант сетки.

Answer 5

[sim3x]

ruby.bvision.com/blog/please-stop-embedding-bootst...