html - Bem 命名约定

Question

我在一个小项目中使用 BEM 命名约定，并且在决定元素和修饰符名称时有些困难。

我目前正在网站的英雄/飞溅部分工作。见下图。

这是我当前的代码 -

<div class="hero hero__project">

    <div class="grid">

        <h1 class="hero__project__title">Final Year Project</h1>

        <div class="hero__project__meta">
            <p>Published<span>23 Oct 2014</span></p>
            <p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p>
        </div>

        <p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>

    </div>  

</div>

我的问题是——你明白这段标记在做什么吗？它是否符合他们的 BEM 方法。谢谢

Answer 1

据我了解 BEM，我会说你的命名没有意义。您的块（或模块）将是您的.hero. 您的元素将是您块的主要组成部分（即项目标题、项目元等）。如果您需要在块上为不同的状态添加一个修饰符，您可以在块之外添加一个修饰符（例如class=".hero .hero--isHidden）

<div class="hero">
  <div class="grid">
    <h1 class="hero__project-title"></h1>
    <div class="hero__project-meta"></div>
    <p class="hero__project-summary"></p>
  </div>
</div>

有关更深入的信息结帐http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Answer 2

为了回答你关于其他名字的问题，我想我会稍微修改一下我的答案。同样，仅当其他元素确实与另一页上的 a 不同时，才使用--project修饰符来设置其他元素的样式。hero

<div class="hero hero--project">
  <div class="grid">
    <h1 class="hero__title"></h1>
    <div class="hero__meta"></div>
    <p class="hero__summary"></p>
  </div>
</div>

Answer 3

我是 BEM 的新手，并试图将我的头脑围绕着这一切。我读过 BEM 的规则之一是没有嵌套选择器。因此，基于第二个答案，假设我们将英雄标题设置为黑色，但将项目英雄标题设置为红色。CSS看起来像这样吗？

.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }