【问题标题】:As in the BEM methodology is better Nativity elements nested within elements在 BEM 方法中,Nativity 元素嵌套在元素中更好
【发布时间】:2015-11-29 00:59:17
【问题描述】:

在 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,里面有一张图片&lt;img src="./images/mini-cart/1.jpg"&gt; 样式化我放置的块

.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中对tags的联系是不可取的,也就是说,这样写好像是不可能的

.product-list__wrapper-img img{
}

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

【问题讨论】:

    标签: html css bem


    【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 2020-08-28
      • 2021-12-10
      • 1970-01-01
      • 2012-02-18
      • 2022-01-16
      • 2020-09-25
      • 2021-01-05
      • 1970-01-01
      • 2017-03-07
      相关资源
      最近更新 更多