или наоборот эти стили нужно задать nav-auth-box, а из auth убрать?

 display: flex;
 align-items: center;
 justify-content: center;

да. то, что не у всех классов есть стили это нормально (я как раз выше в сообщении  написал 2 пункта, почему это нормально).

Можно и так сделать. Ключевое различие между двумя вариантами в том, какое позиционирование в блоке auth используется по-умолчанию (для всех экземпляров этого блока)

Мне трудно понять без примеров

Допустим у нас 3 раза в верстке используется блок auth, содержащий 2 кнопки. В 2 случаях кнопки расположены в ряд. В таком случае мы в блоке auth пишем display: flex. Это значение по-умолчанию, т.к. оно встречается чаще. В 3 случае кнопки расположены друг под другом, т.е. здесь нам надо переопределить значение по-умолчанию. И это переопределение значения мы уже повесим на класс .nav-bar__auth-box, т.к. это различие специфично именно для навигационной панели (причем возможно придется делать это каскадом, чтобы не нарушать специфичности: .nav-bar__auth-box.auth)

но каскад в БЭМ не приветствуется

не приветствуется — значит его нужно минимизировать там, где можно обойтись без него

Спасибо за помощь, самостоятельно в этом сложно разобраться

С опытом приходит понимание. Несколько сложных многоблочных проектов и станет непривычно думать не в рамках БЭМ

Здравствуйте, подскажите пожалуйста где можно взять тесты или практические задания для обучения html+css? Дело в том, что я смотрю обучающие видео и по  разделам читаю документацию на сайтах, но информация очень тяжело укладывается без практики, не смотря на то, что я отрабатываю и воспроизвожу все в редакторе. Говорят надо учится на реальных проектах, а где их взять я не понимаю. Тесты для закрепления знаний тоже мне бы очень помогли. Дайте совет пожалуйста.

@janepolson  https://freebiesbug.com/psd-freebies/website-template/
берешь верстаешь

я уже более-менее продвинутый верстальщик, иногда в удовольствие захожу на https://dribbble.com/ и верстаю что понравилось

Всем привет. Если в БЭМ не рекомендуется использовать сброс стилей, каскады и универсальный селектор, то где праильнее будет задать эти стили?

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'Roboto', sans-serif;
 font-size: 12px;
 background: #F1F3F6;
}

глобальный сброс/нормалайз(если нужен) — делать точечно для каждого блока. Стили для body вынести в отдельный блок типа template-default и повесить этот класс на body

На мой взгляд, для среднестатистического проекта выносить все сбросы внутрь блока — избыточно. Точечный сброс в каждом блоке я делаю только для ui-компонентов, которые переиспользуюся много раз на совершенно различных проектах. А уже непосредственно на проекте использую ресет.

окей спасибо

body это блок page

Добрый вечер. Погружаюсь в БЭМ. Застрял на этапе сборки gulp + bemjson + sass + bootstrap. Если следовать bem-way, то для сеточной вёрстки следует использовать sass-миксины. Итоговый css получается жирный за счёт дублирования кусков кода, но gzip при передаче пользователю это всё оптимизирует. Собственно, от BS берём только самое нужное. Загвоздка в том, что в каждом блоке приходится указывать импорт (а таких блоков может быть очень много). Есть ли возможность где-то в конфиге gulp указать миксины?

@import "mixins";
.header {
@include make-row();
}

При чём здесь bootstrap и миксины — непонятно. Если есть сложности — не используйте миксины.

Если есть сложности, их нужно решать, а не забивать. Бутстрап и миксины тут в общем-то не при чём. Я лишь описал ситуацию.