Как использовать адаптивную сетку + БЭМ методологию?

Есть свой сборщик на gulp + sass + pug (по типу TARS). Есть папка components в которой в отдельных папках хранятся так называемые компоненты (к примеру, button.pug, button.scss, button.js). То есть вся разметка, стили и js для конкретного компонента храниться в одной папке.
Также пытаюсь использовать сетку от foundation 6.
Но есть несколько не понятных моментов.
1) Например шапка сайта в которой выводится логотип, текст и телефоны. В данном случае есть компоненты Лого, Ссылка-телефон. Делаю примерно так:
Считается ли header БЭМ блоком?
Чем тут будет "Текст lorem ipsum"? Где описывать его стили? Вообще где описывать общие стили которые не относятся к компоненту/блоку?
<header class="grid-x">
		<div class="cell">
			+logo()
		</div>
		<div class="cell">
			Текст lorem ipsum
		</div>
		<div class="cell">
			+tel-link()
		</div>
	</header>


2) Берем к примеру блок Лого. Ему нужно задать какие-то отступы. Добавлять классы к самому блоку Лого не хочется, по этому добавляю их обертке (cell).
Но как быть если на мобильной версии одни отступы, а на ПК другие? Получается с помощью сетки нельзя нормально контролировать padding и margin?
Можно попытаться совсем избавиться от сетки, но как тогда разметить шапку? Может сделать один общий файл для стилей которые не относятся к компонентам?
<header class="header">
		<div class="header__logo-block">
			+logo()
		</div>
		<div class="header__text-block">
			Текст lorem ipsum
		</div>
		<div class="header__phones-block">
			+tel-link()
		</div>
	</header>
  • Вопрос задан
  • 350 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Nik_Set_7
header - это блок. От него можно дальше идти: создавать элементы и добавлять модификаторы.
В PostCSS есть миксины. Вы просто импортируете их в то или иное разрешение, в зависимости от того, как блок/элемент должен выглядеть
Ответ написан
Ваш ответ на вопрос

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

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