Confused with BEM: how to deal with IMG and TABLE tags - bem

Question

I'm trying to wrap my head around BEM naming convention in CSS, but for some parts I find it bit confusing.
In my case, my HTML (on a rough level) looks like this:
<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>
In my CSS I have defined styles for the .wrapper, .header, .item, .itemInfo, .itemDetails and .itemDate classes. Turning these into BEM should be straightforward.
However, my questions are related to some other tags in my HTML:
1) How do I deal with the IMG tag? It has styling defined in my CSS file:
img {
style definition 1;
style definition 2;
..
}
Should I BEM this element, both in HTML and in CSS files, by giving image tag a CSS class with BEM convention in my HTML file and also defining this very same class in my CSS, too?
2) In my example, how is TABLE tag understood in the BEM context? In other words, TABLE and TD selectors have their own style definitions in my CSS file (the same way as the IMG tag). Should I also treat those tags the same way as in the case of IMG tag (with/without BEM)?

Answer 1

BEM is designed to provide clarity to developers reading code, especially since CSS/Sass can get convoluted easily. For your <img> tag, I can make one of two assumptions:
You have styling you want to apply to all images, but also
specific styles to apply to this.
There are no other <img> tags and it doesn't matter.
Either way, you should create some CSS classes like so
.standard-img{
rule1: universal-value;
rule2: universal-value;
}
.img-to-style{
rule1: that-only-applies-to-this-img;
}
Obviously, your <img> HTML should look like this, then:
<img class="standard-img img-to-style" src="blah" />
As for the Table, what does it do? I'd do something like this:
<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>
Makes sense, right? Mirror it in your CSS.