Первые шаги

Доброго. Только начал осваивать БЭМ. Подскажите, что в данном случае не так, и как следовало бы правильно сделать?

<header class="header">
    <div class="header__text">
        <p class="text-head"> Заголовок </p>
        <ul class="text-main">
            <li class="text-main__item"> Пункт 1 </li>
            <li class="text-main__item"> Пункт 2 </li>
            <li class="text-main__item"> Пункт 3 </li>
            <li class="text-main__item"> Пункт 4 </li>
        </ul>
    </div>

    <div class="header__logo">
        <img src="#" alt="" class="logo">
    </div>
</header>

5 years ago

Realetive

@Limas94 с точки зрения валидности всё корректно. Понятное дело, что толку от такого БЭМа практически нет, потому что бо́льший смысл именно в реиспользовании: например, встречается ли где-то ещё по проекту стиль .text-head? Если да, то логично «вынести» его в блок-класс, например, .heading (в .text-head можно «оставить» отступы, хотя внешние отступы лучше всё же «хранить» в элементах, поэтому конкретно тут я бы использовал .header__heading ), а, учитывая, что заголовки могут отличаться размерами или цветом, завести ещё и модификаторы: .heading_size_(sm, m, l, xl, etc.), .heading_theme_(light, dark, color, etc.).

<header class="header">
    <div class="header__inner">
        <p class="heading heading_size_l header__heading"> Заголовок </p>
        <ul class="list list_size_l header__features">
            <li class="list__item"> Пункт 1 </li>
            <li class="list__item"> Пункт 2 </li>
            <li class="list__item"> Пункт 3 </li>
            <li class="list__item"> Пункт 4 </li>
        </ul>
    </div>

    <div class="header__logo">
        <img src="#" alt="" class="logo">
    </div>
</header>

Чтобы оставлять комментарии, необходимо авторизоваться.