@quiplunar

Как верстать в angular?

Есть два способа верстки компонентов по BEM(По крайней мере я знаю только 2). У всех свои минусы и плюсы:

1) Работа с тегом:

ui-tag.component.html
<div class="ui-tag__icon" tag-info></div>
<span class="ui-tag__text">
  <ng-content></ng-content>
</span>


ui-tag.component.scss
:host {
  display: flex;
  align-items: center;
  width: max-content;
  height: max-content;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: $purple-light;

  .ui-tag {
    &__icon {
      margin-right: 4px;
    }

    &__text {
      @include typography_body_small;
      color: $purple;
    }
  } //

  &:hover {
    transform: scale(0.05);
  }
  
  @include media('<=tablet') {
    padding: 2px;
  }

  &.ui-tag {
    &--disabled {
      cursor: not-allowed;
      background-color: $grey-light;

      .ui-tag__text {
        color: $grey;
      }
    }
  }
}


В scss мы работаем с тегом через :host

2) Используем тег как обертку и не обращаемся к нему:

ui-tag.component.html
<div class="ui-tag">
  <div class="ui-tag__icon" tag-info></div>
  <span class="ui-tag__text">
    <ng-content></ng-content>
  </span>
</div>


ui-tag.component.scss
.ui-tag {
  display: flex;
  align-items: center;
  width: max-content;
  height: max-content;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: $purple-light;
  $self: &;

  &__icon {
    margin-right: 4px;
  }

  &__text {
    @include typography_body_small;
    color: $purple;
  }

  &:hover {
    transform: scale(0.05);
  }

  @include media('<=tablet') {
    padding: 2px;
  }

  &--disabled {
    cursor: not-allowed;
    background-color: $grey-light;

    #{$self}__text {
      color: $grey;
    }
  }
}


Мне нравиться второй способ, так как по моему мнению он более понятный, и в нем можно использовать $self: & что очень круто, и больше по BEM но есть минус, чтобы обратиться к компоненту из другого в scss нужно будет добавлять к нему класс и писать такое: .index __tag > * {}

Вообщем как правильнее делать?
  • Вопрос задан
  • 467 просмотров
Решения вопроса 1
@Insight707
Зачем вам БЭМ в ангулар? У вас есть инкапсуляция, не усложняйте верстку в том месте, где это вообще не нужно. Разберитесь в проблемах, которые решает инструмент под лейблом БЭМ и задайте себе вопрос - зачем он в ангулар?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vabka
@vabka
Токсичный шарпист
2й вариант по бэму. Менять стили компонента при помощи стилей другого компонента - это плохая практика => нет ничего плохого, что это делается не удобно.
Не понял, как вопрос относится к ангуляру
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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