html - 在 BEM 方法中,更好的是 Nativity 元素嵌套在元素中

标签 html css bem

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

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

.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 我很乐意在这件事上提供任何帮助。

最佳答案

恕我直言:

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

关于html - 在 BEM 方法中,更好的是 Nativity 元素嵌套在元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32371441/

相关文章:

javascript - 使用 HTML 和 CSS 的打印预览功能

JavaScript - 防止页面缩放

css - 仅当视口(viewport)为 X 时才使用 css 文件?

css - BEM:修饰符允许修改什么?

javascript - 如何让 div 保持固定状态直到 jquery 激活

javascript - 在图像中显示 bxslider

javascript - 单击 td 内的 img 时更改 tr 背景颜色

css - BEM: block 中的独立 block

html - 由父 block 专门设置多个使用 block 的样式

结果显示不正确的 html 搜索栏(向右移动)