html - 使用 BEM 减少 html 标记中的类

Question

我尝试从我的 html 标记中取出所有链接类。因为那时我的所有样式都在我的 css 文件中，我不必查看我的 html 内部来查看某些元素的样式以及标记看起来更清晰......

所以不是...

<a class="btn btn--blue btn--large">

……我有……

<a class="[block-name]__btn">

...在我的 CSS 中，我有这个。

.[block-name]
    &__btn{
        @extend %btn;
        @extend %btn--blue;
        @extend %btn--large;
    }

这是一个好方法吗？

如果我将一个 block 与另一个 block 组合在一起，我认为有两种方法

一个)

<div class="register">
    <div class="form register__form"> //order is important if i want to use a modifier on the block form
        <div class="form__row">
            <input type="text" class="form__input"/>
        </div>
        <div class="form__row">
            <input type="submit" class="form__button" label="Jetzt Registrieren"/>
        </div>
    </div>
</div>

CSS

.register{
    &__form{
        margin-top: 60px;
        @extend %form--blue;
    }
}

%form,
.form{
    &--blue{
        .form__input{
            @extend %textfield-pill--blue;
        }
        .form__button{
             @extend %btn-pill--blue;
        }
    }

    .form__row{
        margin-top: 20px
    }

    .form__input{
        @extend %textfield-pill;
    }

    .form__button{
        @extend %btn-pill;
    }
}

乙)我删除了类表...

<div class="register">
    <div class="register__form">  //removed class form
        <div class="form__row">
            <input type="text" class="form__input"/>
        </div>
        ...

...并将其添加到我的 CSS 中。

.register{
    &__form{
        margin-top: 60px;
        @extend %form;
        @extend %form--blue;
    }
  }

你觉得哪个更好？ A) 更好地向我展示了模块形式的开始位置，但是有更多的类并且顺序很重要 B) 更遵循更清晰的标记方式，但没有向我展示 releation form > form__row ...

我在codepen上添加了一个例子 https://codepen.io/destroy90210/pen/rLQKOP

Answer 1

Is this a good approach?

是的，绝对。

What dou you think what is better? A) shows me better where the module form starts, but have more classes and the order is important B) follows more the way for cleaner markup, but doesn't show me the releation form > form__row ...

BEM 方法论绝对是关于 A 的。它被称为混合。参见 https://en.bem.info/methodology/key-concepts/#mix和 https://en.bem.info/methodology/faq/#mixes了解更多信息。