Extending base components and re-using them

[fraudoudou]

I'm wondering how to re-use base components within other components. I created a linklist with base-styling and I'm reusing it as part of a larger component. Within the scope of this component, the linklist requires additional styling. Applying this styling, is it …

• A) an element, because it's used within a component/block – makes it easier to scope component-related styles within the component
• B) a modifier, because it extends the base styling – feels like it respects the idea of BEM more

Or is there an option C) it depends?

• If the adjustments are one use-case only -> A
• If they are global modifiers -> B

<div class="component">
   <ul class="linklist linklist--mod"> OR
   <ul class="linklist component__linklist">
      <li class="linklist__item"> … </li>
   </ul>
</div>

// file lists.less
.linklist {
   …
   &__item {
   }

   // B)
   &--mod {
   }
}

// file component.less
.component {
   …

   // A)
   &__linklist {
   }
}