在 BEM 方法中,更好的是 Nativity 元素嵌套在元素中
As in the BEM methodology is better Nativity elements nested within elements
在 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中对tags的联系是不可取的,也就是说,这么写好像是不可能的
.product-list__wrapper-img img{
}
但是什么时候给 img class 设置样式,以及是否在 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>
在 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中对tags的联系是不可取的,也就是说,这么写好像是不可能的
.product-list__wrapper-img img{
}
但是什么时候给 img class 设置样式,以及是否在 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>