I try to get out all the chaining classes from my html-markup. Because then i have all my styles in my css file and i havn't to look inside my html to see how some elements were styled and the markup looks much cleaner...
So instead of ...
<a class="btn btn--blue btn--large">
...i have...
<a class="[block-name]__btn">
...and inside my css, i have this.
.[block-name]
&__btn{
@extend %btn;
@extend %btn--blue;
@extend %btn--large;
}
Is this a good approach?
And if i have a block with another block combined, i think there are two ways
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>
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) I remove the 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 it in my css.
.register{
&__form{
margin-top: 60px;
@extend %form;
@extend %form--blue;
}
}
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 ...
i added an example on codepen https://codepen.io/destroy90210/pen/rLQKOP
