BEM组件中的Block元素不需要任何样式时该怎么办？

编程问答 2022-06-08

问题描述

假设我有这样的结构：

<article class="product">
  <header class="product__header">
    <h1 class="product__headline">Headline</h1>
    <img class="product__hero" src="" alt="">
  </header>

  <p class="product__description">Content</p>
</article>

默认情况下，Block元素article具有所需的所有样式，因此实际上它没有任何CSS。因此，我不会像这样在CSS中定义它，因为它只会使样式混乱：

.product { }

但是我不确定HTML。应该是

<article class="product"></article>

...无论如何还是只是... 

<article></article>

...因为没有样式？

使用BEM时正确的做法是什么？

解决方法

据我所知，BEM的想法是使用标准并为当前或将来的CSS准备好标记，因此即使您不这样做，您也将始终包含该类立即使用它。

另一个很好的理由是，父类提高了查看标记的人员的可读性和顺序。我什至建议您在CSS中包含该类，并将其保留为空白，其功能几乎类似于字幕，并有可能在以后有用。

最后，BEM建议不要在样式表中嵌套元素，这意味着即使在最小的子类中也喜欢使用类（例如strong中的p标记）。那么，在父级中也有一个类似乎很自然。

,

保持课堂状态以保持独立性。未来的变化可能需要您的风格。这种方法有几个优点：

  1. 在2个月内，您仍然可以确定模块的组件和结构，而无需花费更多精力。
  2. 您和其他所有人将知道这是组件容器，即使您在其间添加了其他包装元素也是如此。
  3. 您也许可以在不触摸HTML的情况下更改布局
  4. HTML语义和布局之间没有依赖性。
  5. 所有当前结构都已镜像到布局中，因此您可以在CSS中看到所有变体和元素。摆脱困境

最后，我同意您所说的CSS杂乱并不是很好，但它可能会很有用，特别是当您与需要依赖标准的更大团队一起开发更大的代码库时。 在解析器/ IDE上：可以配置为忽略此类条目。您的构建过程应该能够删除这些空的选择器，以免其进入生产CSS。

,

我遇到过类似的情况，如果您遵循BEM，则将该类保留在article元素中，因为这将有助于维护（例如删除未使用的样式，更好地了解标记）。

例如（在product.scss中）：-

equal_score = []

for i,j in enumerate(new_gd):    
    if i > len(new_gd):
        break
    if new_gd[i]['score'] == new_gd[i+1]['score']:
        equal_score.append(new_gd[i])
        equal_score.append(new_gd[i+1])'

希望这会有所帮助。编码愉快....

注意：-根据您的标记，您可以将块元素类责任提升到父元素，并使用新的父类更新子类。（例如：-.root__prdHeader）

bem