與BEM混淆：如何處理IMG和TABLE標記

我試圖圍繞BEM命名約定在CSS中的頭部，但對於某些部分，我覺得有點混亂。與BEM混淆：如何處理IMG和TABLE標記

就我而言，我的HTML（在粗糙的水平）是這樣的：

<div class="wrapper"> 
<img src="images/img.png"> 
<span class="header">Heading</span> 
<table> 
    <tbody> 
    <tr> 
     <td class="itemInfo"> 
      <span class="item">Item</span> 
      <span class="itemDetails">Item Details</span> 
     </td> 
     <td class="itemDate">01/01/1980</td> 
    </tr> 
    </tbody> 
</table> 
</div>

在我的CSS我已爲.wrapper定義的樣式，.header，.item，.itemInfo，.itemDetails和.itemDate類。將這些轉換爲BEM應該很簡單。

不過，我的問題是關係到我的HTML一些其他標籤：

1）如何處理IMG標籤？它的造型在我的CSS文件中定義：

img { 
style definition 1; 
style definition 2; 
.. 
}

我應該BEM這個元素，無論是在HTML和CSS文件，通過給圖像標籤與BEM約定CSS類在我的HTML文件，並確定這同也在我的CSS類？

2）在我的例子中，如何在BEM環境中理解TABLE標籤？換句話說，TABLE和TD選擇器在CSS文件中有自己的樣式定義（與IMG標籤相同）。我是否也應該像使用IMG標籤（帶/不帶BEM）一樣對待這些標籤？

來源

2016-11-01 Timo Kiander

BEM旨在爲開發人員閱讀代碼提供清晰，特別是因爲CSS/Sass可以輕鬆地進行復雜化。爲了您的<img>標籤，我可以做出兩種假設之一：

你必須要應用到所有圖像的造型，也特定樣式應用到這一點。
沒有其他<img>標籤，沒關係。

無論哪種方式，你應該創建像這樣

.standard-img{ 
    rule1: universal-value; 
    rule2: universal-value; 
} 

.img-to-style{ 
    rule1: that-only-applies-to-this-img; 
}

顯然一些CSS類，你<img> HTML應該是這樣，那麼：

<img class="standard-img img-to-style" src="blah" />

爲表有哪些呢它呢？我會做這樣的事情：

<table class="ItemsTable"> 
    <tbody> 
    <tr class="table__item-row"> 
     <td class="item-row__info"> 
     <span></span> 
     <span></span> 
     </td> 
     <td class="item-row__date"> 
     // Content 
     </td> 
    </tr> 
    </tbody> 
</table>

有道理，對不對？在您的CSS中鏡像它。

來源

2016-11-01 19:05:04

謝謝！我還有一個問題是：在BEM約定中，是否應該將所有具有CSS樣式的標籤選擇器轉換爲類定義？ –

@TimoKiander是的，你必須這樣做。當所有的be-css特性解釋時，我建議你閱讀文章：https：//en.bem.info/methodology/css/ – skad0

與BEM混淆：如何處理IMG和TABLE標記

回答

相關問題