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

例如，制作一个包含三个元素的 block .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;
        }
    }
}