Question

我尝试从html-markup中删除所有链接类。因为那时我的所有样式都在我的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）我删除了班级表格......

<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）更多地遵循清洁标记的方式，但没有向我展示关联形式＆gt; form__row ...

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

Answer 1

这是一个好方法吗？

是的，绝对。

你觉得什么更好？ A）更好地向我展示模块形式开始的地方，但是有更多的类，顺序很重要B）更多地遵循清洁标记的方式，但没有向我显示相关形式＆gt; form__row ...

BEM方法肯定是关于A.它被称为混合。有关详细信息，请参阅https://en.bem.info/methodology/key-concepts/#mix和https://en.bem.info/methodology/faq/#mixes。

使用BEM的html-markup中的类较少

1 个答案: