Правильно ли я следую методу БЭМ?

<footer id="colophon" class="site-footer">
        <div class="site-footer__form-container widget-area">
            <div id="footer-sidebar1">
                <?php if(is_active_sidebar('footer-sidebar-1')){
                            dynamic_sidebar('footer-sidebar-1');
                        }
                ?>
            </div>
        </div>
        <div class="site-footer__nav-container">

                <div class="site-footer__events">
                    <h3 class="site-footer__title">Events</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">Parade Of Lights</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">SeaFair</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">Burials At Sea</a>
                        </li>
                    </ul>
                </div>
                <div class="site-footer__about">
                    <h3 class="site-footer__title">About us</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./owners" class="site-footer__link">Owners</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./blog" class="site-footer__link">Blog</a>
                        </li>
                    </ul>

                </div>
                <div class="site-footer__contact">
                    <h3 class="site-footer__title">Weddings</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./wedding-info" class="site-footer__link">Wedding Info</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./wedding-menus" class="site-footer__link">Wedding Menus</a>
                        </li>
                    </ul>
                </div>

        </div>
        <div class="site-footer__contact-container">
            <p class="site-footer__phone">(206) 123-4567</p>
            <p class="site-footer__address">
                <a href="#" class="site-footer__link">1234 Water St. Seattle, WA 98107</a>
            </p>
            <div class="site-footer__icons-container">
                <div class="site-footer__facebook"></div>
                <div class="site-footer__instagram"></div>
                <div class="site-footer__twitter"></div>
            </div>
        </div>
        <div class="site-footer__copyright-container">
            <p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
        </div>
    </footer>

Здесь я пытаюсь написать HTML для нижнего колонтитула веб-сайта, и мне интересно, правильно ли я следую методологии/руководству по стилю BEM. Это довольно запутанно для меня. Я никогда не уверен, должен ли я создавать больше «блоков» или нет. Будет ли это правильно? Спасибо за любое понимание.


person ChewyMcFats    schedule 29.09.2017    source источник
comment
Все в порядке, может быть не идеально (я не настолько крут в БЭМ), но выглядит нормально   -  person Commercial Suicide    schedule 29.09.2017
comment
Если у вас возникли проблемы с использованием инструмента или методологии, это не всегда ваша вина — это может быть вина инструмента или методологии. Многих смущает БЭМ. Даже если реализовано правильно, это ужасно многословно. Это, в сочетании с тем фактом, что последние тенденции, включая область видимости CSS, уменьшили потребность в чем-то вроде БЭМ, вот почему вы так мало слышите о нем в последнее время — очень немногие люди его используют. Вы должны тщательно подумать о том, действительно ли вы хотите совершить БЭМ.   -  person    schedule 29.09.2017
comment
@torazaburo обзор CSS, например устаревший :scope псевдокласс?   -  person Paleo    schedule 29.09.2017
comment
Я голосую за то, чтобы закрыть этот вопрос как не относящийся к теме, потому что он требует проверки кода (и, таким образом, это слишком широко / основано на мнении). Вероятно, его можно скорректировать, чтобы он соответствовал теме обмена стеками проверки кода.   -  person Quentin    schedule 29.09.2017
comment
@Палео Ха-ха. Нет, я имел в виду область видимости CSS, такую ​​как CSS-модули, или область видимости CSS, которую можно найти в таких фреймворках, как Angular.   -  person    schedule 29.09.2017
comment
@Quentin Методология BEM всегда считается основанной на мнениях. Это не только синтаксис, но и метод повторного использования классов CSS.   -  person Paleo    schedule 29.09.2017


Ответы (1)


Ваш код подходит для синтаксиса БЭМ. Но монолитно, слишком смыслово, и ничего многоразового нет. Я предлагаю использовать следующую иерархию блоков:

  • site-footer
    • widget-area
    • multi-columns
      • titled-list (events)
      • озаглавленный список (о)
      • озаглавленный список (контакт)
    • contact-box
      • icon (facebook)
      • иконка (инстаграм)
      • значок (твиттер)

HTML-код:

<footer id="colophon" class="site-footer">
    <div class="site-footer__form-container widget-area">
        ...
    </div>
    <div class="site-footer__nav-container multi-columns">
            <div class="multi-columns__col titled-list">
                <h3 class="titled-list__title">Events</h3>
                <ul class="titled-list__ul">
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">Parade Of Lights</a>
                    </li>
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">SeaFair</a>
                    </li>
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">Burials At Sea</a>
                    </li>
                </ul>
            </div>
            <div class="multi-columns__col titled-list">
                ...
            </div>
            <div class="multi-columns__col titled-list">
                ...
            </div>
    </div>
    <div class="site-footer__contact-container contact-box">
        <p class="contact-box__phone">(206) 123-4567</p>
        <p class="contact-box__address">
            <a href="#" class="contact-box__link">1234 Water St. Seattle, WA 98107</a>
        </p>
        <div class="contact-box__icons-container">
            <div class="icon icon--facebook"></div>
            <div class="icon icon--instagram"></div>
            <div class="icon icon--twitter"></div>
        </div>
    </div>
    <div class="site-footer__copyright-container">
        <p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
    </div>
</footer>

Каждый блок представляет собой контекст. Каждый элемент связан с контекстом своего блока. Это означает, что блок не знает, где он расположен. Только элементы могут быть расположены относительно родительского блока. В вашем примере элементы .site-footer__form-container, .site-footer__nav-container и т. д. отвечают за позиционирование дочерних блоков .widget-area, .multi-columns и т. д. внутри родительского блока .site-footer.

Если шаблон повторяется, не забудьте повторно использовать одни и те же блоки (.icon) или элементы (.multi-columns__col) и добавить модификаторы для возможных различий.

Всегда думайте, как сделать так, чтобы ваши CSS-классы можно было повторно использовать в остальной части веб-страницы (может быть, вы могли бы использовать .multi-columns или .icon в другом месте?).

Если что-то может быть блоком, но оно маленькое и не может использоваться повторно в другом месте (контейнер копирайта), то вы можете сохранить его как элемент в родительском блоке просто потому, что это проще.

person Paleo    schedule 29.09.2017
comment
Отлично объяснил. Хорошая работа @Paleo. Мы в Storyblok следуем БЭМ практически во всем, что делаем, так что для вас (ChewyMcFats) я бы рекомендовал вам следовать объяснению. Нет нужды мне снова отвечать. - person DominikAngerer; 29.09.2017
comment
@Палео Спасибо! это многое объясняет, имеет большой смысл! :3 - person ChewyMcFats; 01.10.2017