@Natalisvet21

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

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

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

Например у нас есть во такие кнопки
5f644b0fdab5b071188225.png
<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, я запуталась(((
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Кнопки они везде кнопки
синяя
серая
серая с :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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы