Как правильно раскидать данную верстку на компоненты?

Имеется такая верстка и в некоторых блоках меню немного отличается. Где-то будет чек-бокс, где-то будет color, где-то будет просто текст без чек-бокса и color.

<div class="menu-container">
    <div class="menu">
        <div class="menu-content">
            <div class="menu-title">Название меню 1</div>
            <ul class="menu-list">
                <li class="menu-item">
                    <label class="menu-item-name">
                        <span>Пункт 1</span>
                        <input type="checkbox">
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="menu-desc">Описание меню</div>
</div>
<div class="menu-container">
    <div class="menu">
        <div class="menu-content">
            <div class="menu-title">Название меню 2</div>
            <ul class="menu-list">
                <li class="menu-item">
                    <div class="menu-item-color" />
                    <label class="menu-item-name">
                        <span>Пункт 1</span>
                        <input type="checkbox">
                        <span>Название справа если checkbox`а нет</span>
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="menu-desc">Описание меню</div>
</div>

Мой вариант такой, насколько он правильный? Да, я в курсе что checkbox это UI. Его само собой я вынесу.

components
- Menu // Весь блок menu-container, в котором будет MenuTitle, MenuList, MenuDesc
- MenuTitle // menu-title
- MenuList // menu-list
-- MenuItem // menu-item
- MenuDesc // menu-desc
- MenuColor // menu-item-color