html - Bem 命名约定

Question

我在一个小元素中使用 BEM 命名约定，并且在决定元素和修饰符名称之间存在一些轻微的困难。

我目前正在网站的 hero/splash 部分工作。 见下图。

这是我当前的代码 -

<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 的理解而言，我会说你的命名没有意义。您的 block (或模块)将是您的 .hero。您的元素将是您 block 的主要组成部分(即元素标题、元素元等)。如果你的 block 需要一个不同状态的修饰符，你可以在你的 block 之外添加一个(例如 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/