使用 BEM 方法添加相同的元素名称
Add the same element name using BEM methodology
我开始使用 BEM 方法论,我有一个问题。
示例:
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container-title">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container-title">block3</h1>
</div>
</div>
你怎么看我在块 2 和块 3 中使用了:container__title
元素。我需要这个来为 h1
.
添加不同的边距和填充
问题:我可以根据 BEM
方法在 container__block-2
和 container__block-3
中使用相同的 element
吗?
对于相同 class 的不同变体,您可以使用 --
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--1">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--2">block3</h1>
</div>
</div>
只要您希望具有与上述块相同的属性,就可以将相同的元素用于另一个块。
但是,如果您需要变体,那就是 modifier
发挥作用的时候了。
只要您只需要对一组元素中的特定元素进行更改,就可以在此处使用修饰符。它表示为 block__element--modifier
.
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--modifier1 ">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--modifier2">block3</h1>
</div>
</div>
我开始使用 BEM 方法论,我有一个问题。
示例:
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container-title">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container-title">block3</h1>
</div>
</div>
你怎么看我在块 2 和块 3 中使用了:container__title
元素。我需要这个来为 h1
.
添加不同的边距和填充
问题:我可以根据 BEM
方法在 container__block-2
和 container__block-3
中使用相同的 element
吗?
对于相同 class 的不同变体,您可以使用 --
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--1">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--2">block3</h1>
</div>
</div>
只要您希望具有与上述块相同的属性,就可以将相同的元素用于另一个块。
但是,如果您需要变体,那就是 modifier
发挥作用的时候了。
只要您只需要对一组元素中的特定元素进行更改,就可以在此处使用修饰符。它表示为 block__element--modifier
.
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--modifier1 ">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--modifier2">block3</h1>
</div>
</div>