Принцип единственной ответственности как разобраться?

Question

[Natalisvet21]

Помогите разобраться с принципом единственным ответственности по бэм.

в CSS по БЭМ означает, что каждая CSS-реализация должна иметь одну ответственность.
Ответственность: внешняя геометрия и позиционирование (зададим внешнюю геометрию и позиционирование для блока button через элемент header__button).

Например у нас есть во такие кнопки

<div class="form__buttons">
            <button class="form__btn-send">Отправить на модерацию</button>
            <button class="form__btn-cancel">Отмена</button>
            <button class="form__btn-save">Сохранить в мои черновики</button>
          </div>
        </form>

.form {
  &__buttons {
    width: 100%;
    margin: 32px 0px 145px 0px;
  }
  &__btn-cancel {
    width: 92px;
    height: 45px;
    margin-left: 30px;
    background: #e9e9e9;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #333333;
  }

  &__btn-save {
    width: 231px;
    height: 45px;
    position: relative;
    left: 54%;
    background: #e9e9e9;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #333333;

    &:hover {
      background: #dbdbdb;
    }
    &:active {
      background: #c4c4c4;
    }
    &:focus {
      background: #e9e9e9;
      border: 2px solid #dbdbdb;
      border-radius: 2px;
    }
  }
  &__btn-send {
    width: 216px;
    height: 45px;
    background: #2f80ed;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #ffffff;

    &:hover {
      background: #2974d9;
      border-radius: 2px;
    }
    &:active {
      background: #236acb;
      border-radius: 2px;
    }
    &:focus {
      background: #2f80ed;
      border: 2px solid rgba(47, 128, 237, 0.5);
      border-radius: 2px;
    }
  }
}

Я написала так, но нарушается принцип единственной ответственности. Если я пытаюсь это исправить у меня получается большие классы по несколько на элемент. Как разграничивать ответственность? Например я всем кнопкам поставлю один класс, но цвет текста и фон у них разный. И как я поняла в одном классе нельзя описывать например цвет текста, стиль текста и размеры элемента?Для этого должен быть ещё один класс.Кто может привести пример как правильно написать со стилями с scss, я запуталась(((

Comments

[Одиночка Айс]

1. Никогда (в 99% случаев) не указывайте ширину, особенно кнопкам.
2. Есть родитель, есть его дети, у которых есть общие стили.
3. Затем каждому ребенку указываем только его отличительные особенности.

[Ankhena]

Кнопки это блоки - они переиспользуются. Делайте миксы.

<button class="form__btn btn btn--cancel">Отмена</button>

и т.д.
элементу - геометрию
блоку - всё, что одинаковое
модификатору блока - отличающееся

[Natalisvet21]

Получается так будет например со стилями?И padding: 15px 20px 13px 20px; получается у блока задаем?

<button class="form__btn btn  btn--send">Отправить на модерацию</button>
<button class="form__btn btn btn--cancel">Отмена</button>
<button class="form__btn btn btn--save">Сохранить в мои черновики</button>

.btn{
font-family: Ubuntu;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #333333;

border-radius: 2px;

padding: 15px 20px 13px 20px;
}
.form__btn{
margin-top: 32px;
}
.btn--send{
background: #2F80ED;
color: #FFFFFF;
}
.btn--cancel{
background: #E9E9E9;


}
.btn--save{
background: #E9E9E9;
}

Answer 1

[Михаил]

Кнопки они везде кнопки
синяя
серая
серая с :disabled

и никаких повторяющихся стилей
width: 216px; (а теперь измените текст в кнопке)
height: 45px; (либо паддинги, либо высота)

и почему .form? кнопки не только в форме могут быть

А по картинке

<button class="btn is-primary">text</button>
<button class="btn is-secondary">text</button>
или
<button class="btn btn--primary">text</button>
<button class="btn btn--secondary">text</button>

Comments

[Natalisvet21]

Спасибо, понятнее стало)