Вложение Sass с использованием БЭМ - PullRequest
Новая
       8

Вложение Sass с использованием БЭМ

0 голосов
/ 20 января 2019

Я пытаюсь понять, как я могу улучшить свою работу с sass, используя BEM. Должен ли я что-нибудь изменить в моем коде ниже? Я думаю, что это действительно чисто в HTML, но в SASS трудно определить, что вложено в какой блок. У меня есть один класс .c-header вверху и все элементы в одной строке, используя '&'. Как мне это исправить и сделать лучше? 

<header class="c-header">
        <nav class="c-header__nav">
            <div class="c-header__logo">
                <a href="#">
                    <div class="c-header__circle">
                        <i class="c-header____leaf fab fa-envira"></i>
                    </div>
                    <h1 class="c-header____title">treehouse</h1>
                </a>
            </div>
            <i class="c-header____burger fas fa-bars"></i>
            <ul class="c-header__menu">
                <li class="c-header__item"><a href="#">home</a></li>
                <li class="c-header__item"><a href="#">about</a></li>
                <li class="c-header__item"><a href="#">blog</a></li>
                <li class="c-header__item"><a href="#">portfolio</a></li>
                <li class="c-header__item"><a href="#">contact</a></li>
            </ul>
        </nav>
        <div class="c-header__content">
            <h1 class="c-header__caption">creative digital solutions</h1>
            <p class="c-header__paragraph">Lorem ipsum dolor sit amet consectetur.</p>
            <button class="c-header__button">view portfolio</button>
        </div>
    </header>``

1 Ответ

0 голосов
/ 02 февраля 2019

Это одна из целей BEM: сделать ваш CSS менее зависимым от вашей структуры HTML.

Вот почему у нас нет специальных классов для элемента grand children.Другими словами, именно поэтому классы .block__element__sub-element запрещены.

Согласно официальной документации :

Кроме того, что классы выглядят намного приятнее, это делает элементы зависимыми только от блока.Таким образом, вы можете легко перемещать их по блоку при внесении изменений в интерфейс.Изменения блочной структуры DOM не потребуют соответствующих изменений в коде CSS.

Так что да, ваш HTML здесь довольно чистый.И я уверен, что ваш CSS тоже чистый;)

PS: у некоторых классов слишком много фона, например c-header____burger.

...