i try out chaining classes html-markup. because have styles in css file , havn't inside html see how elements styled , markup looks cleaner...
so instead of ...
<a class="btn btn--blue btn--large"> ...i have...
<a class="[block-name]__btn"> ...and inside css, have this.
.[block-name] &__btn{ @extend %btn; @extend %btn--blue; @extend %btn--large; } is approach?
and if have block block combined, think there 2 ways
a)
<div class="register"> <div class="form register__form"> //order important if want use modifier on 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> the 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) remove class form...
<div class="register"> <div class="register__form"> //removed class form <div class="form__row"> <input type="text" class="form__input"/> </div> ... ...and add in css.
.register{ &__form{ margin-top: 60px; @extend %form; @extend %form--blue; } } what dou think better? a) shows me better module form starts, have more classes , order important b) follows more way cleaner markup, doesn't show me releation form > form__row ...
i added example on codepen https://codepen.io/destroy90210/pen/rlqkop
is approach?
yes, absolutely.
what dou think better? a) shows me better module form starts, have more classes , order important b) follows more way cleaner markup, doesn't show me releation form > form__row ...
bem methodology a. it's called mixes. see https://en.bem.info/methodology/key-concepts/#mix , https://en.bem.info/methodology/faq/#mixes more info.
Comments
Post a Comment