Подскажите как вы разбиваете вашу верстку на блоки
Вот возьмем, например, header.
Хедере это конкретный блок со своим классом и модификаторами (если нужно). Далее все намного проще - позиционирование мы не включаем в стили модификатора, это скорее изменение его внешнего вида, об этом следует помнить.
Предположим внутри блока есть кнопка, которая есть и в других блоках.
Ну так и делайте ее отдельным блоком, например с классом
.btn или
.button и у нее будут свои модификаторы. Чаще всего у блока кнопки их много. Пример как делаю я:
.btn {}
/* style */
.btn--primary {}
.btn--secondary {}
/* size */
.btn--sm {}
.btn--md {}
.btn--xl {}
/* special */
.btn--link {}
Маргины мы прописываем в стилях к этой кнопке и добавляем соответствующий модификатор?
Нет, отступы и кастомные стили (очень специфичные) мы задаем в зависимости от родительского блока в котором находиться кнопка, в данном случае это хедер. Мы может сделать так:
.header .btn {}
или например такой класс сделать
.header__btn {}
Я предпочитаю вложенность (
но не больше 1 уровня)
А как эти кусочки потом собрать? С помощью pug includes или gulp
Ну тут уже по разному, как вам удобней и зависит от конкретного инструмента, если говорить о pug, то я делал так
1. объявление миксина в отдельном файле
mixin button(caption)
button.button&attributes(attributes)!= caption
2. Подключал в глобальный скоуп через шаблоны (include)
3. Пользовался миксином в любом места.
Предположим еще в этом блоке есть меню, которое больше нигде не используется, его мы уже верстаем не отдельно, а вместе?
Сделайте отдельным компонентом - не пожалеете. Во первых держать весь код в порядке (в одном понятном виде) удобно. Во вторых - если будет нужно расширение проекта или почти такое же меню но в другом месте, это вам пригодиться.
Простой
