How do I name a navbar structure with BEM?

Question

I have the following SASS code.

How would I do the exact same but using the BEM methodolgy?

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

score 2 · Accepted Answer · answered Jul 22 '15 at 08:57

For example, make a block .primary-nav with three elements .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;
        }
    }
}

How would it work for multiple tier hierarchy? i.e. Many nested subnav within subnav. — Awin, Oct 25 '17 at 07:54

score 1 · Answer 2 · answered Jul 22 '15 at 08:05

BEM is a naming convention for classes (distinguishing identifiers and modifiers); the concept is to create ,very strict, single class selector.

The way this is achieved is through SCSS ampersand selector;

In your scenario , since you're markup doesn't combine classes to customize elements, it doesn't make much sense.

How do I name a navbar structure with BEM?

2 Answers2