Should an *Element* have any vertical alignment?
An idea I've been mulling over is that the Block dictates the spacing inside it. However, up to this stage I have been adding a bottom margin
to the any typography from the Element itself.
Should we have the typography devoid of any vertical spacing and rely on the Block to tell it what to do?
I know from at least the vf-teaser
Block pattern that I am having to overwrite the CSS (although there's no !important
to be found.
I think that might only increase the more pattern we have.
Thoughts?
Should we have no vertical alignment on any Element component and leave that to the Block to dictate?
If we do, should we let the Block parent classname tell the Element components what to do or should we add the appropriate Block__Element
be added to the Element
.vf-teaser .vf-heading { ... }
or
.vf-teaser__heading { ...}
which in the HTML would be
<article class="vf-teaser">
<h2 class="vf-teaser__heading | vf-heading vf-heading--l">Hello World!</h2>
</article>
or
<article class="vf-teaser">
<h2 class="vf-heading vf-heading--l">Hello World!</h2>
</article>