Есть свой сборщик на 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>
Простой
Простой
