BEM

[iatsdotfatr]

1. В шаблоне должен быть только один бэм-блок, здесь их три. Название rectangle несемантическое. Лучше сделать элементы rectangle элементами authorization, так как rectangle нигде больше не используется. Ну и authorization-card более точное название, чем просто authorization.

2. Вместо числовых индексов лучше дать описательные названия; так как миксы запрещено использовать, их надо убрать; двойной дефис не надо использовать, это один из вариантов обозначения модификатора в БЭМ. Название модификатора br непонятное, в таких случаях сокращения лучше не использовать. На сайте методологии БЭМ в разделе про модификаторы посмотреть, что такое булевый модификатор и модификатор ключ-значение, и применять их соответственно.

[hoka-hoka]

1. "В шаблоне должен быть только один бэм-блок."

Имеется в виду само определение или использование бэм-блока. Например, если подключаем один бэм-блок внутри другого, через вызов pug-миксина следующим образом:

header.pug:

logo.pug

то в шаблоне header.pug используется один бэм-блок или два? Если один, то всё исправил.

2. Бэм-миксины отовсюду убрал. Названия модификаторов поправил.

Теперь при вызове pug-миксинов в них передаются не просто какие-то параметры, а полноценные объекты со свойствами и значениями, например:

Свойство mod каждого pug-миксина содержит объект последней части имени модификатора, который будет добавлен к блоку input-date или его элементам. Здесь тоже исправил.

[iatsdotfatr]

Не надо делать блокам фиксированную ширину. Ну и цвет фона дублируется

[hoka-hoka]

Исправил.

[iatsdotfatr]

1. Это не отдельные элементы, а два модификатора для элемента arrow.

2. Это тоже один элемент, индивидуальные стили можно задать модификаторами, можно через псевдоклассы.

3. Если делаешь вложенность, блок лучше сохранить в переменной, если вдруг понадобится изменить название блока, это можно будет сделать в одном месте. Например, не так: а так:

4. Вынеси общие свойства в after элемента, в модификаторах установи нужный content.

5. Название миксина не совпадает с названием блока.

6. 

[hoka-hoka]

1. Если здесь дело в неправильном названии модификаторов, то исправил. Они же применяются к блоку button, в котором и находятся основная часть стилей. Теперь эти классы названы так: button_prev_arrow вместо button_arrow-prev (button with arrow prev) button_next_arrow вместо button_arrow-next

2. Поправил.

3. Исправил. А как быть, если, класс блока или элемента используется в другом scss-файле, например, в input-range.scss:

   .input-range:checked ~ .label__text {...}

   Здесь я уже не смогу использовать переменную объявленную в пределах блока label, то есть так не получится:

   .input-range:checked ~ #{$label}__text {...}

   Но при объявлении переменной я могу добавить метку !global. На сколько это будет правильно?

4. Исправил.

5. Исправил.

6. Исправил.

[iatsdotfatr]

только arrow_prev и arrow_next, ключ arrow, prev и next возможные значения

[hoka-hoka]

Я выше дополнил ответ.

[iatsdotfatr]

1. Двойной элемент.

2. Ключ-значение.