Question

在BEM方法中，更好的Nativity元素嵌套在元素中我有以下标记：

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

我有一个块.product-list，它有元素.product-list__wrapper-img，其中有一张图片<img src="./images/mini-cart/1.jpg"> 对我放置的块进行样式化

.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%
}

我知道似乎在BEM中标签联系是不可取的，即所以似乎不可能写出来

.product-list__wrapper-img img{
}

但是当给img类设置样式时，以及在BEM中是否为元素中的元素。我知道修饰符可以是我知道的元素。我想我需要打电话给这张照片 .product-list__img也许 .product-list__wrapper-img__img 我很乐意在这件事上提供任何帮助。

Answer 1

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>

或：

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

与BEM方法一样，更好的Nativity元素嵌套在元素中

1 个答案: