Как лучше модифицировать блок?

Question

[wakenbyWork]

У меня есть блок который нужно модифицировать, вот он:

<div class="user-profile">
    <div class="user-profile__avatar"></div>
    <div class="user-profile__name">Имя пользователя</div>

    <div class="user-profile__button">Сказать привет!</div>
</div>

И у меня две идеи как его модифицировать:

1) Навешивать на сам блок модификатор, и так влиять на его элементы:

<div class="user-profile user-profile--small">
    <div class="user-profile__avatar"></div>
    <div class="user-profile__name">Имя пользователя</div>

    <div class="user-profile__button">Сказать привет!</div>
</div>

.user-profile {
  $self: &;
  
  &__avatar {/* ... */}
  
  &__name {/* ... */}
  
  &__button {/* ... */}
  
  &--small {
    #{$self}__avatar {
      width: 22px;
      height: 22px;
    }

    #{$self}__name {
      color: $pink;
    }

    #{$self}__button {
      width: 100%;
    }
  }
}

2) Добавлять модификаторы уже к самим элементам:

<div class="user-profile">
    <div class="user-profile__avatar user-profile__avatar--small"></div>
    <div class="user-profile__name user-profile__name--small user-profile__name--pink">Имя пользователя</div>

    <div class="user-profile__name user-profile__name--fluid">Сказать привет!</div>
</div>

.user-profile {
  &__avatar {
    /* ... */
    
    &--small {
      width: 22px;
      height: 22px;
    }
  }

  &__name {
    /* ... */
    
    &--pink {
      color: $pink;
    }
  }

  &__button {
    /* ... */
    
    &--fluid {
      width: 100%;
    }
  }
}

P.S: Так-же мне необходимо таблицу модифицировать, вот те-же подходы, только с ней:

1) Влияние на элементы через модификатор блока:

<table class="table-def table-def--font-small">
    <tr class="table-def__header">
        <td>№</td>
        <td>Скажи привет!</td>
    </tr>

    <tr class="table-def__body">
        <td>1</td>
        <td>Хай</td>
    </tr>

    <tr class="table-def__body">
        <td>1</td>
        <td>Хаай</td>
    </tr>

    <!-- 99+ lines -->
</table>

2) Изменение элементов через их модификатор

<table class="table-def">
    <tr class="table-def__header">
        <td>№</td>
        <td>Скажи привет!</td>
    </tr>

    <tr class="table-def__body table-def__body--font-small">
        <td>1</td>
        <td>Хай</td>
    </tr>

    <tr class="table-def__body table-def__body--font-small">
        <td>1</td>
        <td>Хаай</td>
    </tr>

    <!-- 99+ lines -->
</table>