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

要回答关于其他名字的问题，我想我会略微修改我的回答。同样，仅使用--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会是这样的吗？

After:=...