命名BEM子塊

我正在使用BEM方法來編寫html + css。有了這個語法：命名BEM子塊

塊：block_name
- 元素：block_name__element_name
- 修飾符：block_name__element_name - 修改

我感到困惑時，我有另一個塊內的塊。例如，在標題中，我希望標題是我可以引用的塊，導航和徽標是塊。我想將這些導航和徽標塊引用爲site_header內的塊。但是，我會怎麼寫呢？鏈接塊像block_name__sub_block_name似乎很長。

有沒有人有他們會寫這個例子的典型方式？

<div class="site_header__logo"> 
    <a class="site_header__logo__link"> 
     <img class="site_header__logo__image"> 
    </a> 
</div> 

<nav class="site_header__main_nav"> 
    <ul> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">Home</a> 
     </li> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">About Us</a> 
     </li> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

<div class="site_header__phone"> 
    <p class="site_header__phone__number"> 
     555.555.5555 
    </p> 
</div>

來源

2014-03-28 jeremyhoover

我認爲標誌，主標題和手機配合其在BEM網站給出的的block定義：

塊是一個獨立的實體，「積木式」的應用程序。塊可以是簡單的也可以是複合的（包含其他塊）。

你得到的是一個複合塊（site_header）中的三個簡單塊（logo，main_nav和phone）。它實際上與在BEM methodology definitions page上給出的HEAD複合塊非常相似。

所以我會這樣寫：

<div class="logo"> 
    <a class="logo__link"> 
     <img class="logo__image"> 
    </a> 
</div> 

<nav class="main_nav"> 
    <ul> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">Home</a> 
     </li> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">About Us</a> 
     </li> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

<div class="phone"> 
    <p class="phone__number"> 
     555.555.5555 
    </p> 
</div>

如果你認爲「標誌」是太普通的名字，不代表該項目的其他類型的徽標隨時給它是一個不同的名稱，如「company_logo」。

就造型而言，BEM建議使用塊修飾符和元素修飾符來表示其不同的樣式。例如，如果你想有大膽的電話號碼，那麼您可以在CSS創建一個類改性劑，並將其應用到你的HTML如下：

.phone__number--bold { 
    font-weight: bold; 
} 

<div class="phone"> 
    <p class="phone__number phone__number--bold"> 
     555.555.5555 
    </p> 
</div>

修飾符超過內的其他造型塊的首選方式塊。所以不做到這一點：

.site_header .phone__number { 
    font-weight: bold; 
}

我覺得有一個例外，當你想給「位置相關的樣式」裏面的塊是。假設你想給「logo」塊留下一個左邊距。而不是創建一個修改器一樣的：

.logo--push_20 { 
    margin-left: 20px; 
}

這是更好地遵循OOCSS second principle - 單獨的容器和內容 - 而離開崗位到容器：

.site_header .logo { 
    margin-left: 20px; 
}

來源

2014-03-30 20:33:57 katranci

.site_header .logo是我正在尋找的。但是，這將如何轉化爲BEM造型？可以使用修飾符，例如.logo - site_header或它自己的名稱.site_header_logo，還是應該像.site_header__logo一樣鏈接？ – jeremyhoover

其中三個使用修飾符如'.logo - site_header'。如果可以，請根據修飾符帶來的樣式差異選擇修飾符名稱。「.site_header_logo」和「.site_header__logo」都暗示緊密耦合，這與BEM塊的獨立性質相反。 – katranci

謝謝！我現在正在更好地掌握BEM。 – jeremyhoover

-2

是的，你可以在類名中去掉了很多。例如：

HTML：

<nav class="site_header"> 
    <ul> 
     <li class="nav_item"> 
      <a class="nav_link">Home</a> 
     </li> 
     <li class="nav_item"> 
      <a class="nav_link">About Us</a> 
     </li> 
     <li class="nav_item"> 
      <a class="nav_link">Contact Us</a> 
     </li> 
    </ul> 
</nav>

然後你的CSS放內：

.site_header { 
    ... stuff ... 
} 

.site_header .nav_item { 
    ... nav_item stuff ... 
} 

.site_header .nav_link { 
    ... nav_link stuff ... 
}

來源

2014-03-28 21:16:13 Matt

謝謝馬特，但那不是我的意思。您提供的CSS輸出不是遵循BEM命名方法。我覺得很難說清楚，我在實踐中沒有找到實例來看待。我想基於包含在另一個塊中的塊來引用塊，但我不想在我的示例中使用過長的命名結構。一種選擇是在第二級塊上使用修飾符。 – jeremyhoover

不是BEM語法。 –

你也可能對BEM's FAQ看看。

什麼是另一個元素內的元素的類名？ .block__elem1__elem2？

如果我的塊的結構複雜，並且它的元素嵌套，該怎麼辦？ CSS類像block__elem1__elem2__elem3看起來嚇人。根據BEM方法，塊結構應平坦化;您不需要反映塊的嵌套DOM結構。所以，這種情況下，類名是：

.block{} 
.block__elem1{} 
.block__elem2{} 
.block__elem3{}

鑑於塊的DOM表示可以被嵌套：

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'> 
      <div class='block__elem3'></div> 
     </div> 
    </div> 
</div>

另外一個事實，即類看起來更漂亮，這讓元素僅取決於塊。因此，在提供界面更改時，您可以輕鬆地將它們移動到塊中。塊DOM結構的變化不需要對CSS代碼做相應的改變。

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div>

來源

2015-08-25 18:47:35

回答

相關問題