Как правильнее использовать БЭМ в флекс верстке?

Решил попробовать сверстать страницу с помощью флексов, как правильнее здесь использовать методологию БЭМ? Делать дополнительные контейнеры/обертки (хз как правильно назвать) с флекс-свойствами или расширять уже существующие классами, типа .b-block .b-block_flex?
  • Вопрос задан
  • 2926 просмотров
Решения вопроса 3
dom1n1k
@dom1n1k
Всё зависит от того, будут ли во флекс-ячейках элементы (используемые только в этом контексте) или блоки (могут быть переиспользованы где-то ещё).

В первом случае всё просто, приблизительно так:
<div class="container">
	<div class="container__header"> ... </div>
	<div class="container__body"> ... </div>
	<div class="container__footer"> ... </div>
</div

.container {
	display: flex;
	...
}
.container__header {
	flex: 1 1 auto;
}
.container__body {
	flex: 1 1 auto;
}
.container__footer {
	flex: 1 1 auto;
}


Во втором случае да, будут полезны дополнительные обертки, на которые и будут повешены флекс-свойства. Причина в том, что блок не должен ничего знать о своем позиционировании на странице, он должен знать только собственное устройство. А положением управляет вышестоящий уровень. Примерно так:
<div class="container">
	<div class="container__header">
		<div class="some-header-block"> ... </div>
	</div>
	<div class="container__body">
		<div class="some-body-block"> ... </div>
	</div>
	<div class="container__footer">
		<div class="some-footer-block"> ... </div>
	</div>
</div


В общем, в процессе верстки нужно задавать себе вопрос - этот блок может быть использован где-то ещё? Пусть не прямо сейчас, но хотя бы теоретически в будущем? Если да - делать обертки.
Ответ написан
@cssfish
Плохое знание основ - причина больших бед
Можно и так, и так. Потому что БЭМ не про это.
Ответ написан
dpmango
@dpmango
Лучше писать на уникальные классы все флекс-свойства.

Если будите пытаться сделать свой "бутстрап" из флексов, рано или поздно запутаетесь и забросите эту идею. И тем более другие разработчки не поймут

Например .header__wrapper вместо .flex-wrap.flex-wrap--aic.flex-wrap--jcsb
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kentuck1213
@kentuck1213
Да зачем оно надо там ? Создай базовые классы, я делаю это так:
.flex-container{
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.flex-item{
margin: 15px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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