如何命名與BEM一個導航欄結構？

Question

我有以下SASS代碼。

我怎麼會做同樣的，但使用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; 
 
      } 
 
     } 
 
    } 
 
}

Answer 1

例如，製作帶有三個元件.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; 
     } 
    } 
} 

Answer 2

BEM

爲類（區分標識符和改性劑）的命名約定;這個概念是創建非常嚴格的單一類選擇器。

達到這一目的的方式是通過SCSS ampersand selector;

在您的情況，因爲你的標記不合並類定製元素，它並沒有太大的意義。