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变得混乱（尤其是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配合良好。

Scss是否命名嵌套类

1 个答案: