Scss называет вложенные классы или нет

Question

Таким образом, в scss вы можете ссылаться на вложенные элементы, не называя их именами классов.Посмотрите на эти примеры.

Не называя их:

.navar {
    ...

    & button {
        background-color: pink;
        ...
    }
}

<div class="navbar">
    <button>One</button>
    <button>Two</button>
    <button>Three</button>
</div>

Называя их:

.navar {
    ...

    & .navbar-button {
        background-color: pink;
        ...
    }
}

<div class="navbar">
    <button class="navbar-button">One</button>
    <button class="navbar-button">Two</button>
    <button class="navbar-button">Three</button>
</div>

Не называя их:

• PRO: HTML выглядит очень чисто
• CON: Не очевидно, что класс влияет на элемент
• CON: Колледжи должны понимать точный дизайн вложения (или отлично копировать и вставлять вещи)

Называть их:

• PRO: Это очевиднокласс влияет на элемент
• CON: HTML-код загроможден (особенно с Angular в HTML)
• CON: Вам нужно подумать об уникальномобъясняя имя класса каждый раз

Помните, если вы не знаете, что стиль влияет на что-то, вы можете столкнуться с сценарием "what on earth is causing this font to become bold?".Представьте себе гораздо более вложенную сборку, чем моя (что не редкость):

.navar {
    & button {
        & div div {
            & a {
                & label {
                    font-weight: bold;
                }
            }
        }
    }
}

Но, опять же, такой чрезвычайно вложенный сценарий создаст очень чистый HTML.Предоставление каждому классу потребует от вас придумать уникальные имена классов и сделать HTML более визуально сложным.

Чтобы называть вложенные классы или не называть вложенные классы, вот в чем вопрос:)

Пока я предпочитаю НЕ называть их.HTML просто получается намного красивее.Но моя проблема в том, что колледжи должны понимать точный дизайн вложения, чтобы использовать стили.

Answer 1

Один большой недостаток использования стилей для тегов напрямую заключается в том, что вы не можете просто изменить элемент html.

Допустим, у вас есть <button>, но однажды вы думаете, что было бы лучше изменить это на тег <a>. Было бы лучше установить стили для класса .button. Тогда вам не нужно заботиться об элементе. Это должно просто выглядеть как кнопка.

Также, когда у вас есть глубокие вложенные элементы, которые должны иметь стили: рассмотрите возможность использования некоторых лучших методик именования CSS. Я бы предложил вам использовать БЭМ. http://getbem.com/introduction/

Это помогает вам поддерживать чистоту вашего css и хорошо работает с scss.