I read here that it is a good BEM practise to use layout components to arrange the flow and positioning of other components. The resource suggests the following example:
<ul class="l-grid">
<li class="l-grid__item">
<div class="c-card">
<div class="c-card__header">
[…]
</div>
<div class="c-card__body">
[…]
</div>
</div>
</li>
<li class="l-grid__item">
<div class="c-card">
<div class="c-card__header">
[…]
</div>
<div class="c-card__body">
[…]
</div>
</div>
</li>
</ul>
While the above makes perfect sense, I'm not sure on how to apply this approach to a typical block based page flow such as the listed below:
<section class="c-page-section c-page-section--white-bg">
<div class="l-container">
<h1 class="c-page-section__title">Page Title</h1>
<hr class="c-separator c-page-section__separator">
<p class="c-paragraph">
...
</p>
<p class="c-paragraph">
...
</p>
<p class="c-paragraph">
...
</p>
<ul class="l-horizontal-list">
<li class="l-horizontal-list__item c-tag">Java</li>
<li class="l-horizontal-list__item c-tag">PHP</li>
<li class="l-horizontal-list__item c-tag">HTML</li>
<li class="l-horizontal-list__item c-tag">CSS/SASS</li>
</ul>
</div>
</section>
I am uncertain whether to apply margins inside the h1
, hr
and p
based c-components or to create additional layout components around the them?
Thank you in advance!