0

BEM 方法論では、要素内にネストされた降誕要素の方が優れ
ているため、次のマークアップがあります。

 <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 ば幸いです。

4

1 に答える 1

1

私見では：

<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>
于 2015-09-03T17:48:55.800 に答える