Правильно ли организована разметка по БЭМ?

Форум /

Добрый вечер. Подскажите пожалуйста, правильно ли организована разметка по БЭМ? Внешняя геометрия и позиционирование блока, а именно padding, position и т.д задаётся через миксы .top-bar__top-lang, .top-bar__top-phone, page__header, footer__copyrights, header__navigation, page__wrapper. Все ли я правильно понял? Можно ли упростить/добавить что либо DOM-узлах?

<body class="page">
    <div class="wrapper page__wrapper">
        <div class="top-bar page__top-bar">
            <div class="top-bar__container">
                <div class="top-bar__row">
                    <div class="top-lang top-bar__top-lang">
                        <ul class="top-lang__list">
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                        </ul>
                    </div>
                    <div class="top-phone top-bar__top-phone">
                        <!-- START .top-phone__list -->
                        <ul class="top-phone__list">
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link">p</a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <header class="header page__header">
            <div class="navigation header__navigation">
                <nav class="navigation__container">
                    <ul class="navigation__list">
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <footer class="footer page__footer">
            <div class="copyrights footer__copyrights"></div>
        </footer>
    </div>
</body>

5 years ago

Realetive

Вроде, всё верно. По одному HTML-фрагменту сложно судить, смысл БЭМ в переиспользовании HTML и CSS в рамках всего проекта.

5 years ago

ubirashka

Уместна ли такая разметка? Блоки использоваться повторно не будут.

<body class="page">
    <div class="page__wrapper">
        <header class="header page__header">
            <div class="header__top">
                <div class="header__container">
                    <div class="header__row">
                        <div class="top-lang header__top-lang">
                            <ul class="top-lang__list">
                                <li class="top-lang__item"><a href="" class="top-lang__link"></a></li>
                                <li class="top-lang__item"><a href="" class="top-lang__link"></a></li>
                                <li class="top-lang__item"><a href="" class="top-lang__link"></a></li>
                            </ul>
                        </div>
                        <div class="top-phone header__top-phone">
                            <ul class="top-phone__list">
                                <li class="top-phone__item"><a href="" class="top-phone__link"></a></li>
                                <li class="top-phone__item"><a href="" class="top-phone__link"></a></li>
                                <li class="top-phone__item"><a href="" class="top-phone__link"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__navigation">
                <nav class="navigation header__container">
                    <ul class="navigation__list">
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                        <li class="navigation__item"><a href="" class="navigation__link"></a></li>
                    </ul>
                </nav>
            </div>
            <div class="header__container">
                <div class="header__row">
                    <div class="logo header__logo"><a href="" class="logo__link"><img src="" alt="" class="logo__img"></a></div>
                    <div class="bottom-phone header__bottom-phone">
                        <ul class="bottom-phone__list">
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                        </ul>
                    </div>
                    <div class="bottom-phone header__bottom-phone">
                        <ul class="bottom-phone__list">
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                            <li class="bottom-phone__item"><a href="" class="bottom-phone__link"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>

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