BEMと混同している：IMGとTABLEタグを扱う方法

Question

私はCSSでBEM命名規則を頭で覆いたいと思っていますが、一部の部分では混乱することがあります。私の場合は

、（粗いレベルでの）私のHTMLは次のようになります。私のCSSで

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

私は.wrapperのスタイルを定義して、.header、.item、.itemInfo、.itemDetails .itemDateクラス。これらをBEMに変えることは簡単であるはずです。

1）私はIMGタグに対処するにはどうすればよい：

しかし、私の質問は、私のHTML内の他のタグに関連していますか？それは私のCSSファイルで定義されたスタイルを持っている：

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

は、I BEMこの要素、HTML内およびCSSファイル内の両方万一私のHTMLファイルにBEM大会で画像タグにCSSクラスを与え、また非常に同じ本を定義することにより、私のCSSのクラスも？

2）私の例では、BEMコンテキストでTABLEタグをどのように理解していますか？言い換えれば、TABLEセレクタとTDセレクタは、自分のCSSファイルに独自のスタイル定義を持っています（IMGタグと同じ方法）。これらのタグは、IMGタグ（BEMあり/なし）の場合と同じ方法で扱うべきですか？

Answer 1

BEMは、特にCSS/Sassが複雑になるので、コードを読む開発者に明快さを提供するように設計されています。あなたの<img>タグのために、私は2つの仮定の1にすることができます。

1. あなたはすべての画像に適用するスタイルを持っているし、だけでなく、 具体的なスタイルは、これに適用します。
2. 他の<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でそれをミラーリングしてください。