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>

不为他们命名：

• 专业版：HTML 看起来很干净
• CON：类影响元素并不明显
• CON：大学需要了解确切的嵌套设计（或完美地复制和粘贴内容）

命名：

• PRO：很明显一个类正在影响元素
• 缺点：HTML 变得混乱（尤其是在 HTML 中使用 Angular）
• 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 命名最佳实践。我建议你使用 BEM。 http://getbem.com/introduction/

它可以帮助您保持 css 清洁并与 css 配合使用。