css - 如何使用 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

例如，制作一个.primary-nav包含三个元素.primary-nav__ul、.primary-nav__li、的块.primary-nav__a。

.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;
        }
    }
}

Answer 2

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

实现这一点的方法是通过SCSS & & 选择器；

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