Меньше классов в 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;
    }

Это хороший подход?

И если у меня есть блок с другим блоком, я думаю, что есть два способа

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

Б) Я удаляю форму класса...

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

Как ты думаешь, что лучше? А) лучше показывает мне, где начинается форма модуля, но имеет больше классов и важен порядок. Б) следует больше пути для более чистой разметки, но не показывает форму выпуска> form__row ...

я добавил пример на codepen https://codepen.io/destroy90210/pen/rLQKOP

Answer 1

Это хороший подход?

Да, конечно.

Как ты думаешь, что лучше? А) лучше показывает мне, где начинается форма модуля, но имеет больше классов и важен порядок. Б) следует больше пути для более чистой разметки, но не показывает форму выпуска> form__row ...

Методология БЭМ определенно относится к А. Это называется миксы. См. https://en.bem.info/methodology/key-concepts/ и https://en.bem.info/methodology/faq/ для получения дополнительной информации.