Question

我对这个HTML结构有疑问。根据BEM方法，它是否正确？

  driver.findElement(By.cssSelector('i.fa.fa-file-text')).click();

在我看来它应该是那样的

<div class="boxWithBorder">
  <div class="header">
    <h2 class="boxWithBorder__element"></h2>
  </div>
</div>

什么保持元素被封装。

Answer 1

通常我们做组件和结构，这意味着结构是组件的组合。这将需要嵌套，以便部分正常。至于你的第一种方法不符合我们的标准而没有使用。 block1不应该存在于block2中，但是block2必须存在于block1中，因为它是一个嵌套组件。说得通？ BTW BEM是完全可以使用的，很多前端开发人员也做，重量级人物，例如csswizardry.com，他得到了一些关于BEM的好文章

另外我建议以下使用BEM（或任何html / css）是跳过camleCase并使用＆＃34; - ＆＃34;代替

<div class="box-with-border">
  <div class="header">
    <h2 class="header__element"></h2>
  </div>
</div>


<div class="hero hero--red-with-border">
  <h1 class="hero__title>Title...</h1>
  <p class="hero__body-text">Text...</p>
</div>

BEM方法论正确的HTML结构

1 个答案: