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

Question

[quiplunar]

Есть два способа верстки компонентов по 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 > * {}

Вообщем как правильнее делать?

Comments

[Олег]

Складывать стили внутрь хоста нет никакого смысла в вашем примере.
И перезаписывать стили из родительских компонентов не надо, это плохая практика.

[quiplunar]

Олег, А где можно посмотреть хорошие примеры?

Answer 1

[Insight707]

Зачем вам БЭМ в ангулар? У вас есть инкапсуляция, не усложняйте верстку в том месте, где это вообще не нужно. Разберитесь в проблемах, которые решает инструмент под лейблом БЭМ и задайте себе вопрос - зачем он в ангулар?

Comments

[quiplunar]

Спасибо, а где можно посмотреть примеры

[Insight707]

https://ru.bem.info/methodology/quick-start/
Большинство стилей именования классов решает проблему глобальной видимости локальных стилей. Ангулар избавлен от этого недуга. Пишите как по БЭМ, но без дублирования префиксов.

[quiplunar]

Insight707,

А как быть со стилизацией? Типа модификаторов. Что с ними делать?

Я правильно понял что мы работатет с бем только без префикса блока. а с постфиксом модификатора

[Insight707]

quiplunar, модификатор такой же класс как и все остальные. Красный блок? Ну, пишите, red. Никаких постфиксов и суффиксов. Не надо ничего перемешивать.

[quiplunar]

Insight707, Спасибо большое! Я работал с anguar + BEM и все больше понимал что дичь делаю. Теперь я уверен что BEM в agnular не нужен.

Спасибо что уделили время. Вы мне столько нервов спасли!!))

Answer 2

[Василий Банников]

2й вариант по бэму. Менять стили компонента при помощи стилей другого компонента - это плохая практика => нет ничего плохого, что это делается не удобно.
Не понял, как вопрос относится к ангуляру