What is the best way to modify a block?

Question

css

I have a block that needs to be modified, here it is:

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

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

And I have two ideas on how to modify it:

1) Attach a modifier to the block itself, and influence its elements in this way:

<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) Add modifiers already to the elements themselves:

<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%;
    }
  }
}

PS: I also need to modify the table, here are the same approaches, only with it:

1) Influence on elements through the block modifier:

<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) Changing elements through their modifier

<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>