css - Bem 嵌套命名

Question

假设我有一个面板 block ，里面有卡片，我想制作 block ，所以它应该是这样的:

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

我应该为 .card block 使用一些前缀吗？

Answer 1

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

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

所以有两个 block :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