禁止在不使用*selector的情况下对弹性包装箱项目进行弹性包装

Question

我使用BEM，使用flexbox容器纯粹是为了对齐和响应设计。问题是，有时它也想扩展其子元素，而我不希望这样。像这样：

.card {
width: 120px;
background: gray;
}
.container {
display: flex;
align-items: center;
}
.flex-item1 {
width: 50px;
background: blue;
}
.flex-item2 {
overflow-wrap: normal;
background: green;
}
.ruller {
width: 50px;
background: gray;
}

<div class='card'>
<div class='container'>
<div class='flex-item1'>
I'm picture 50px wide
</div>
<div class='flex-item2'>
I'm long text
</div>
</div>
</div>
<div class='ruller'>
My width is 50px
</div>

这是蓝色元素正在被缩放，并且其规则width被忽略。

对此的一个直接解决方案是明确禁止对每个元素进行弯曲。

.flex-item1 {
width: 50px;
background: blue;
flex: none; /* the fix */
}

但是container是一个通用类，我在几十种不同的情况下使用它，我不想向它的子元素的所有可能的类添加更多的CSS代码，也不想向HTML中的所有这些元素添加另一个类似container-item的类。

另一个直接的解决方案是

.container * { /* the fix */
flex: none;
}

但这违背了BEM关于使用选择器的一般指导原则。我希望避免在此处使用*选择器。

有第三种方法吗？也就是说，它不向子元素的样式添加任何CSS规则，也不使用*选择器。

让我问这样一个问题的是像align-items这样的规则的存在，这些规则是通过作用于子元素(即柔性框项目(而放置到父元素(即弹性框本身(的。我想我的解决方案是这样的：

.container {
display: flex;
align-items: center;
flex-items: none; /* a pseudo rule, which doesn't exist and need to be replaced by other rules to work */
}

Answer 1

如果您坚持无一例外地遵循BEM，那么您应该在为元素定义的类中拥有所需的规则。这将是BEM的方式。你可能不喜欢把代码放在20-30个不同的地方，但这是BEM的折衷。

就我个人而言，当有意义的时候，我会将BEM与实用程序类结合起来，我不相信完全遵循BEM会产生最干净、最容易维护的代码库。

另一方面，Tailwind受欢迎程度的上升表明，BEM和类似的方法并不适用于所有人。

尽管如此，我还是建议在你的BEM项目中加入一些实用程序类，享受两全其美。