@alex-85

Как совместить сетку и БЭМ?

Здравствуйте.

Долго думал использовать ли сетку или нет, пришел к выводу что нужно. Выбор стоит между миксинами bootstrap 4 и susy.

Ну и сам вопрос как совмещать сетку с БЭМ?
К примеру, такие блоки как кнопка или поле ввода сетка не затрагивает. А вот блок хедер – там в большинстве случаев и меню и логотип и контакты и поиск и т.д., а это уже сетка.
Делать сетку из элементов хэдера .header__logo, .header__menu или добавлять классы к этим элементам .header__logo .col-2?
Или верстать сетку, а элементы в нутрии?:

<div class="col-2">
	<a href="/" class="header__logo">


Заранее спасибо.

<!-- Вариант #1 -->

<header class="header">
	<div class="header__in">
		<a href="#" class="header__logo logo">LOGO</a>

		<nav class="header__menu menu">
			....
		</nav>
	</div>	
</header>

<!-- Вариант #2 -->

<header class="header container">
	<div class="header__in row">
		<a href="#" class="header__logo logo col-2">LOGO</a>

		<nav class="header__menu menu col-10">
			....
		</nav>
	</div>	
</header>

<!-- Вариант #3 -->

<header class="header">
	<div class="container">
		<div class="row">
			<div class="col-2">
				<a href="#" class="header__logo logo">LOGO</a>
			</div>

			<div class="col-10">
				<nav class="header__menu menu">
					....
				</nav>
			</div>
		</div>
	</div>	
</header>
  • Вопрос задан
  • 385 просмотров
Решения вопроса 2
werty1001
@werty1001
тинки-винки
Я сделал блок grid и все, один раз написал и пользуйся потом во всех проектах, если лень, то да, можно просто взять от bootstrap, но тогда лучше вкладывать БЭМ сущности в сетку, если миксовать, то будет совсем кашка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Yastr
@Yastr
Когда то был стажером в фирме, занималась разработкой огромных, международных проектов.
Там, работая с сеткой, меня прям заставляли делать именно так как вы предлагаете.
Сейчас, что то типа "технического директора" в небольшой компании, и во всех проектах, которые веду придерживаюсь такой схемы, и сотрудников приучил к такому.

Но тут загвоздка в том, что сам над этим вопросом не задумывался. Как научили так и делаю, и возможно мой тим лид был не прав)

.col-2>.header--logo
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы