CODEWITHSUNDEEP
htmlcssbem
Alexey Popov
Alexey Popov

Reputation: 76

As in the BEM methodology is better Nativity elements nested within elements

As in the BEM methodology is better Nativity elements nested within elements
I have the following markup:

 <table class="product-list">
                        <tr>
                          <th>Your Items</th>
                          <th>Price</th>
                          <th>Qty</th>
                          <th>Remove</th>
                        </tr>
                        <tr>
                          <div class="product-list__wrapper-img"><img src="./images/mini-cart/1.jpg"></div>
                        </tr>
                      </table>

I have a block .product-list, it has the element .product-list__wrapper-img , in it there is a picture <img src="./images/mini-cart/1.jpg"> Stylizing the block I put 

.product-list{
  width: 680px
}

.product-list__wrapper-img{
  position:relative;
  z-index:0;
  width: 77px;
  height: 90px
}

.product-list__wrapper-img img {
  position: absolute
  z-index: 1
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  max-width: 98%
  max-height: 98%
}

I know that seems to be in the BEM to the tags contact is not desirable, i.e., so seems to be impossible to write 

.product-list__wrapper-img img{
}

But what when give the img class to style it, and whether in the BEM , to be the element in the element. I know that modificator can but the element I know. I guess I need to call this picture .product-list__img maybe .product-list__wrapper-img__img I would be glad for any help in this matter.

Upvotes: 0

Views: 87

Answers (1)

mwl
mwl

Reputation: 1488

imho:

<table class="product-list">
    <tr>
        <td>
            <div class="product-list__wrapper-img">
                <img class="product-list__img" src="./images/mini-cart/1.jpg">
            </div>
        </td>
    </tr>
</table>

or:

<table class="product-list">
    <tr>
        <td class="product">
            <div class="product__wrapper">
                <img class="product__img" src="./images/mini-cart/1.jpg">
            </div>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions