Question

我有以下一段html代码...

<div class="testimonials testimonials--scale testimonials--increase-shadow">
  <div class="testimonials__image-wrapper">
    <img class="testimonials__image" src="./assets/images/passion/money-box.jpg" alt="money box: for the poor">
  </div>
  <div class="testimonials__edge-touch">
    <h2 class="headline headline--black headline--small headline--margin-bottom-large ">Fourth Created Forth Fill Moving Created Subdue Be</h2>
    <div class="flex flex--align-items-center">
      <img class="flex__margin-right-tiny" src="./assets/images/icon/passion_1.svg" alt="circle target">
      <p class="paragraph paragraph--grey">GOAL: $2500 </p>
      <img class="flex__margin-right-tiny flex__margin-left-auto icon-positioning" src="./assets/images/icon/passion_2.svg" alt="signal sign">
      <p class="paragraph paragraph--grey">RAISED: $1533 </p>
    </div>
    <p><a href="#" class="button button--white button--small button--full-width button--not-rounded">Read More</a></p>
  </div>
</div>

有5个块“推荐，flex（显示：flex），标题（标题），段落和按钮块”。 *这是一个好的代码吗？ *我该怎么做才能使其变得更好？

Answer 1

大多数情况下都可以，除了testimonials--increase-shadow和testimonials--scale之类的某些部分。

让我们快速回顾一下BEM；

阻止：

参考官方文档，Block封装了一个独立的实体，对于您自己的情况testimonials，它是有意义的。

元素：

在您的情况下，testimonials__image-wrapper中的元素是块的一部分，没有独立的含义。

修饰符：

在块或元素上标记为headline--black，以更改外观，行为或状态。

基于此，如果您想缩放元素并向其添加阴影，则可以将其定义为一个变体（修饰符）。但是，您要做的更多是创建帮助程序类并将其添加为变体的原子方法。

原因：

尽管testimonials--scale可以算作修饰语，但我想，您只是在证明书中增加了比例，这是一个帮助类。如果您确实这样命名，则会限制自己仅将其用于见证模块，这会降低可重用性。

如果您需要帮助器类，只需像scale-up这样全局命名即可。作为辅助类，实际上不算作修饰符。修饰符的一个好例子可以是heading和heading--second，其中标题秒可能具有较小的字体，不同的行高和不同的颜色。但是简单地将其设置为heading--small-font或heading--green只会使您的生活更加艰难。

尝试将修饰符抽象为可重用的类。

请更全面地阅读check this out

BEM命名约定：我走在正确的道路上吗？

1 个答案: