如何使用 BEM 命名导航栏结构？

Question

我有以下 SASS 代码。

除了使用 BEM 方法外，我该怎么做呢？

nav.primary ul {
    border-top: 2px solid $darkgreen;
    display:block;
    margin:10px 0 0 0;
    padding: 25px 0 0 0;

    li {
        background-color:#004f5a;
        display: inline-block;
        float: none;
        margin-left:0;
        padding: 5px 0;
        text-align: center;
        width: 100%;

        a {
        color:#fff;
        letter-spacing: 0.5px;

            &:hover {
                color:$darkgreen;
            }
        }
    }
}

Answer 1

BEM 是 classes 的命名约定（区分标识符和修饰符）；这个概念是创建非常严格的单个 class 选择器。

实现方式是通过SCSS ampersand selector;

在您的场景中，由于您的标记没有组合 classes 来自定义元素，因此没有多大意义。

Answer 2

例如，用三个元素 .primary-nav__ul、.primary-nav__li、.primary-nav__a、

创建一个块 .primary-nav

.primary-nav {
    &__ul {
        border-top: 2px solid $darkgreen;
        display: block;
        margin:10px 0 0 0;
        padding: 25px 0 0 0;
    }
    &__li {
        background-color: #004f5a;
        display: inline-block;
        float: none;
        margin-left: 0;
        padding: 5px 0;
        text-align: center;
        width: 100%;
    }
    &__a {
        color:#fff;
        letter-spacing: 0.5px;
        &:hover {
            color: $darkgreen;
        }
    }
}