Cách tốt nhất để tạo các mẫu nhánh sử dụng nhiều lớp/thuộc tính khác nhau là gì? Cảm ơn

Tải các thực thể nút theo chủ sở hữu

Tôi đã tạo một mẫu cành cây và đã thêm các lớp như bên dưới.
{%
  đặt tiêu đề-class = [
    'Tiêu đề',
    'h1',
  ]
%}

{%
  đặt subtitle-classes = [
    'phụ đề',
    'h2',
  ]
%}

<div{{ attribute.addClass('title-classes') }}>
    {{ nội dung.title }}
</div>
<div{{ attribute.addClass('subtitle-classes') }}>
    {{ content.field_subtitle }}
</div>

<div class="section highlighted">
    <div class="title h1">
        {{ content.title }}
    </div>
    <div class="subtitle h2">
        {{ content.field_subtitle }}
    </div>
    <div class="panel intro padding-lg">
        <p>{{ content.field_intro }}</p>
        <p class="disclaimer">{{ content.field_intro_disclaimer }}</p>
        <a href="{{ content.field_link }}" class="btn inline padding-lg hide-small">{{ content.field_link_text }}</a>
        <a href="{{ content.field_link_2 }}" class="btn block hide-large hide-medium">{{ content.field_link_text_2 }}</a>
    </div>
</div>

Tôi phải làm gì khi có một mẫu HTML phức tạp. Hãy xem xét những điều dưới đây. Đây là một phần rất nhỏ trong loại nút của tôi. Tôi có nên tạo các lớp cho tất cả các lớp khác nhau mà tôi sử dụng không? Hoặc tôi chỉ có thể đặt chúng như tôi có dưới đây?