提问人：Mykyta Severyn 提问时间：9/23/2023 最后编辑：Mykyta Severyn 更新时间：11/8/2023 访问量：27
使用边界元法进行大型布景设计
Using BEM for large set design
问：
我对如何解决类的名称问题很感兴趣。例如，第一部分（英雄）我有 30+ 个选项。它们内部具有不同的结构和不同的块。
一方面，它们是完全不同的块，它们的样式可能与第一个变体完全不同。从用户的角度来看，它看起来像一个块的变体。
我倾向于这样称呼这些部分：
- .hero01
- .hero01__container
- .hero02
- .hero02__container
但是如此大量的新类只是令人困惑。另一方面，我不希望有人不小心更改所有容器的样式，而只更改本节中使用的样式。
我想弄清楚什么最适合用于具有不同结构的变体名称。
答：
0赞
Marina Petrova
11/8/2023
#1
BEM 不赞成使用非描述性类名，例如 ，您提出此类问题是正确的。.hero01
如果我正确理解了您的困境，我建议使用 BEM 混合。这意味着，您可以在一个节点上混合不同的类名。
将所有英雄变体的常见样式移动到一个类中，为了简单起见，我们称之为 - 我相信不会有太多，也许会有一些类似的填充、显示、定位、文本属性、默认背景......你的名字。.hero
然后根据需要创建任意数量的类，以设置所有英雄变体的样式。
- 它们的名称可能完全无关——想象一下，您将能够在另一个地方重用此结构，因此请有意义地命名它们，例如：、、。
hero.picture-text.video-hero.slider - 它们应该包含更具体的 CSS：间隙、大小、颜色等。这个CSS可以覆盖你为主要内容设置的一些默认样式（所以它们的描述应该在类之后，而不是之前）。
.hero.hero - 要使用这种方法，只需将两个类添加到一个 HTML 节点中，如下所示： — 因此，两组 CSS 规则都将应用于一个元素。
<section class="hero slider"> - 不要犹豫，对嵌套节点执行相同的操作，例如：
<section class="hero picture-text">
<div class="hero__container picture-text__container">
<h2 class="picture-text__title">Title</h2>
...
</div>
</section>
不要忘记使您的标记和样式灵活且可调整。这样一来，你就可以简单地将不同数量的文本块或图像插入到同一个容器中，并且UI不会中断，需要立即进行重大重构。
希望对您有所帮助！让我知道任何问题。
评论
0赞
Mykyta Severyn
11/9/2023
这看起来很棒！它将帮助我保持类的长度，而不是重复样式。
评论