Bem 嵌套命名

Question

假设我有 panel 个方块，里面有卡片，我想制作方块，所以它应该是这样的：

.control-block
  .control-panel
    .control-results
      .card
        .card-title
        .card-body

我应该使用一些前缀来阻止 .card 吗？

Answer 1

card 块不需要任何前缀，但我宁愿使用这样的前缀：

.control
  .control__panel
    .control__results
      .card
        .card__title
        .card__body

所以有两个块：control 和 card 在里面。 control 有两个元素：panel 和 results。 card 有 title 和 body.

如果您想将 card 与 control 联系起来，您可以添加 mix 与 control__card，因此最终标记为：

.control
  .control__panel
    .control__results
      .card .control__card
        .card__title
        .card__body

有关此类方法的更多信息，请参阅 https://en.bem.info/methodology/css/#mixes

Bem nested naming