Опишите правильно структуру FormInput по БЭМ?

Question

[hamster141095]

Что не так с этим input? Пишут, что не по бэму...

<div class="form-input">
  <label for="username" class="label form-input__label">User name</label>
  <div class="form-input__inner">
    <input class="input input_notification_error" id="username" placeholder="" type="email" />
    <svg
     SVG
    </svg>
  </div>
  <label for="username" class="label form-input__label label_notification_error"
    >Something goes wrong</label
  >
</div>

Компонент на React

const FormInput: React.FC<IFormInput> = ({ id, type, placeholder = '', labelText, errorText }) => {
  return (
    <Wrapper className="form-input">
      <Label htmlFor={id} labelText={labelText} className="form-input__label" />

      <Wrapper className="form-input__inner">
        <Input type={type} isError={!!errorText} placeholder={placeholder} id={id} />
        {errorText && <Icon color={ColorType.error} name={IconName.inputError} />}
      </Wrapper>

      {errorText && (
        <Label htmlFor={id} isError errorText={errorText} className="form-input__label" />
      )}
    </Wrapper>
  );
};

Стили

@import '../../../styles/variables';

.form-input {
  max-width: 354px;

  &__label {
    margin-bottom: 4px;

    &.label_notification_error {
      margin: 4px 0px 0px 20px;
    }
  }

  &__inner {
    position: relative;

    & svg {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}

Comments

[hamster141095]

typography typography_variant_span typography_color_cornflowerblue

Правильно ли задавать такие модификаторы?

[Realetive]

hamster141095, да, вполне. Нейминг соблюдается.

[Ankhena]

Не вижу проблем с разметкой с точки зрения БЭМ.
Вызывает вопрос дублирование label.

Со стилями тоже не вполне удачно. Логичнее модификатор описывать там же, где и основной блок/элемент.

Answer 1

[Realetive]

С HTML всё ок (если нет возможности задать CSS-класс , то всё ок), JSX не смотрел, а в CSS смутила вот эта строка:

&.label_notification_error {
  margin: 4px 0px 0px 20px;
}

Смешиваются стили .form-input__label и label_notification_error. Эту проблему решит каскад:

.form-input {
  &__label {
    margin-bottom: 4px;
  }
}

.label {
  &_notification_error {
    margin: 4px 0px 0px 20px;
  }
}

Если же такой margin нужен только у этой конкретной формы — или вынести его в инлайн-стили, или сделать отдельный модификатор, но для .form-input__label (например,

.form-input_view_super-form-with-notification-margin .form-input__label_notification_error {
  margin: 4px 0px 0px 20px
}

)