With ITCSS, when to reuse objects or build new components?

[RhysyG]

Hey there! Let's say we have a component called c-chat.

In the chat component, there is a very recognisable design pattern. The classic media object. Avartar left and text right.

Would you recommend using the media object here to save markup? OR is it better to repeat the media markup so you know that the element actually belongs to the chat component?

For example:

<div class="c-chat">
    <div class="c-chat__content">
        <div class="o-media">
            <div class="o-media__item">Avatar</div>
            <div class="o-media__body">Message...</div>
        </div>
    </div>
    <div class="c-chat__buttons"></div>
</div>

vs

<div class="c-chat">
    <div class="c-chat__content">
        <div class="c-chat__message">
            <div class="c-chat__avatar">Avatar</div>
            <div class="c-chat__text">Message...</div>
        </div>
    </div>
    <div class="c-chat__buttons"></div>
</div>

Thanks!