使用 BEM 在 html 标记中减少类

Question

我试图从我的 html-标记中删除所有链接 classes。因为那时我的所有样式都在我的 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;
    }

这是一个好方法吗？

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

A)

<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;
    }
}

B) 我删除了 class 表格...

<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) 更好地向我展示了模块形式的开始位置，但有更多 classes 并且顺序很重要 B) 更遵循更清晰的标记方式，但没有向我展示关系形式 > 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 and https://en.bem.info/methodology/faq/#mixes。

使用 BEM 在 html 标记中减少 类

Less classes in html-markup with BEM

html

css

bem

使用 BEM 在 html 标记中减少类